// ** React Imports
import { ChangeEvent, useState } from 'react'

// ** Next Import
import Link from 'next/link'

// ** MUI Imports
import Card from '@mui/material/Card'
import Grid from '@mui/material/Grid'
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
// ** Icon Imports
import Icon from 'src/@core/components/icon'
import * as yup from "yup";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import InputLabel from "@mui/material/InputLabel";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import AppReactDatepicker from '../components/datepicker/AppReactDatepicker'
import FormControlLabel from "@mui/material/FormControlLabel";
import { display } from '@mui/system'
import { DateType } from 'src/types/forms/reactDatepickerTypes'
interface State {
  vehicle: string
  code: string
}

const schema = yup.object().shape({
  vehicle: yup.string().required(),
  code: yup.string().required(),
});

const Holiday = () => {
  // ** States
  const defaultValues = {
    vehicle : '',
    code: '',
  }

  const [userType, setUserType] = useState<string>("");
const [dateStart, setDateStart] = useState<DateType>(new Date())
  const handleUserType = (e: SelectChangeEvent) => {
    setUserType(e.target.value);
  };

  const {
    reset,
    control,
    setValue,
    setError,
    handleSubmit,
    formState: { errors }
  } = useForm({
    defaultValues,
    mode: 'onChange',
    resolver: yupResolver(schema),
  })

  const onSubmit = (data: State) => {
    const {vehicle, code} = data
  }

  return (
    <Card>
      <CardHeader title="休日" sx={{ fontSize: '24px' }}/>
      <CardContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Grid container >
            <Grid item xs={6}>
                <Card sx={{width: 'fit-content', mb:5 }}>
                <AppReactDatepicker
                    onChange={(dateStart: Date) => setDateStart(dateStart)}
                    inline
                    boxProps={{
                        className: 'flex justify-center is-full',
                        sx: { '& .react-datepicker': { boxShadow: 'none !important', border: 'none !important' } }
                    }}
                />
                </Card>
            </Grid>
            <Grid item xs={6}>
            </Grid>
            <Grid item xs={6}>
                <FormControl size="medium" sx={{ mb: 4 }}>
                    <InputLabel id="invoice-status-select">年を選ぶ</InputLabel>
                    <Select
                    sx={{ pr: 4 }}
                    value={userType}
                    label="ルート"
                    onChange={handleUserType}
                    labelId="invoice-status-select"
                    >
                    <MenuItem value="2021">2021</MenuItem>
                    <MenuItem value="2022">2022</MenuItem>
                    <MenuItem value="2023">2023</MenuItem>
                    </Select>
                </FormControl>
                <span style={{ display: 'inline-flex', padding : "15px" }}>年の土曜日を全て休日に選択する</span>
                <Button type='submit' variant='contained' size='medium'>
                登録する
                </Button>
            </Grid>
            <Grid item xs={6}>
            </Grid>

            <Grid item xs={6} >
                <FormControl size="medium" sx={{ mb: 4 }}>
                    <InputLabel id="invoice-status-select">年を選ぶ</InputLabel>
                    <Select
                    sx={{ pr: 4 }}
                    value={userType}
                    label="ルート"
                    onChange={handleUserType}
                    labelId="invoice-status-select"
                    >
                    <MenuItem value="2021">2021</MenuItem>
                    <MenuItem value="2022">2022</MenuItem>
                    <MenuItem value="2023">2023</MenuItem>
                    </Select>
                </FormControl>
                <span style={{ display: 'inline-flex', padding : "15px" }}>年の土曜日を全て休日に選択する</span>
                <Button type='submit' variant='contained' size='medium' >
                登録する
                </Button>
            </Grid>
          </Grid>
        </form>
      </CardContent>
    </Card>
  )
}

Holiday.acl = {
  action: 'manage',
  subject: 'admin'
}

export default Holiday