// ** React Imports
import { useState, ChangeEvent, MouseEvent, forwardRef, ForwardedRef } from "react";

// ** Next Imports
import Link from "next/link";
import { GetStaticProps, InferGetStaticPropsType } from "next/types";

// ** MUI Imports
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import Menu from "@mui/material/Menu";
import Grid from "@mui/material/Grid";
import { styled } from "@mui/material/styles";
import MenuItem from "@mui/material/MenuItem";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import { DataGrid, GridColDef } from "@mui/x-data-grid";

// ** Icon Imports
import Icon from "src/@core/components/icon";

// ** Store Imports
import { useDispatch } from "react-redux";


// ** Types Imports
import { AppDispatch } from "src/store";
import { ThemeColor } from "src/@core/layouts/types";
import { ScheduleType } from "src/types/apps/scheduleTypes";
import RadioGroup from "@mui/material/RadioGroup";
import Radio from "@mui/material/Radio";
import FormControlLabel from "@mui/material/FormControlLabel";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import DatePicker from 'react-datepicker'
import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker'
import InputAdornment from '@mui/material/InputAdornment'
import FormHelperText from "@mui/material/FormHelperText";
import * as yup from "yup";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import FormControl from "@mui/material/FormControl";
import { DateType } from 'src/types/forms/reactDatepickerTypes'
interface FormData {
  dateStart: string;
  dateEnd: string;
  customerType: string;
}

const schema = yup.object().shape({
  dateStart: yup.string().required(),
  dateEnd: yup.string().required(),
  customerType: yup.string().required(),
});

const CustomInputStart = forwardRef(({ ...props }, ref: ForwardedRef<HTMLElement>) => {
	return <TextField inputRef={ref} label="始期" fullWidth
  InputProps={{
  startAdornment: (
      <InputAdornment position='start'>
      <Icon icon='ri-calendar-line' />
      </InputAdornment>
  )
  }} {...props} />
})
CustomInputStart.displayName = 'CustomInputStart'

const CustomInputEnd = forwardRef(({ ...props }, ref: ForwardedRef<HTMLElement>) => {
	return <TextField inputRef={ref} label="始期" fullWidth
  InputProps={{
  startAdornment: (
      <InputAdornment position='start'>
      <Icon icon='ri-calendar-line' />
      </InputAdornment>
  )
  }} {...props} />
})
CustomInputEnd.displayName = 'CustomInputEnd'

const Schedule = () => {
  // ** Hooks
  const dispatch = useDispatch<AppDispatch>();

  const [dateStart, setDateStart] = useState<DateType>(new Date())
  const [dateEnd, setDateEnd] = useState<DateType>(new Date())
  const [customerType, setCustomerType] = useState<string>()

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setCustomerType((event.target as HTMLInputElement).value)
  }

  return (
    <Grid container spacing={6}>
      <Grid item xs={12}>
        <Card>
          <Box
            sx={{
              p: 5,
              pb: 3,
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center",
              justifyContent: "space-between",
              fontSize : '24px',
            }}
          >
            <span className="mr-4 mb-2" >集計</span>
          </Box>
          <form noValidate autoComplete="off">
          <Box
            sx={{
              p: 5,
              pb: 3,
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Grid container spacing={5}>
              <Grid item xs={6}>
                <DatePickerWrapper>
                    <DatePicker
                        selected={dateStart}
                        id='date-start'
                        customInput={<CustomInputStart />}
                        onChange={(dateStart: Date) => setDateStart(dateStart)}
                        
                    />
                </DatePickerWrapper>
              </Grid>
              <Grid item xs={6}>
                <DatePickerWrapper>
                    <DatePicker
                        selected={dateEnd}
                        id='date-end'
                        customInput={<CustomInputEnd/>}
                        onChange={(dateEnd: Date) => setDateEnd(dateEnd)}
                    />
                </DatePickerWrapper>
              </Grid>
            </Grid>
          </Box>
          <Box
            sx={{
              p: 5,
              pb: 3,
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Grid container spacing={5}>
              <Grid item xs={6}>
                <Box sx={{ mb: 4 }}>
                  <Typography>顧客種別</Typography>
                    <RadioGroup row value={customerType} name='simple-radio' onChange={handleChange} aria-label='simple-radio'>
                      <FormControlLabel value='全ての顧客' control={<Radio />} label='全ての顧客' />
                      <FormControlLabel value='行政系顧客' control={<Radio />} label='行政系顧客' />
                      <FormControlLabel value='事業系顧客' control={<Radio />} label='事業系顧客' />
                  </RadioGroup>
                </Box>
              </Grid>
              <Grid item xs={12} sx={{direction:'rtl'}}>
                <Button type='submit' variant='contained' size='large' >
                CSVエクスポート
                </Button>
              </Grid>
            </Grid>
          </Box>
          </form>
        </Card>
      </Grid>
    </Grid>
  );
};

Schedule.acl = {
  action: "manage",
  subject: "admin",
};

export default Schedule;