// ** 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 data from 'src/@fake-db/components/data'

interface State {
  name: string
  code: string
  explain: string
}

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

const AdministrationCreate = () => {
  // ** States
  const defaultValues = {
    name: '',
    code: '',
    explain: ''
  }

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

  const onSubmit = (data: State) => {
    const {name, code, explain} = data
  }
  return (
    <Card>
      <CardHeader title="行政系レポート種別" sx={{ fontSize: '24px' }}/>
      <CardContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Grid container >
            <Grid item xs={6}>
              <FormControl fullWidth sx={{ mb: 4 }}>
                  <Controller
                    name="name"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        autoFocus
                        label="顧客"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.name)}
                        placeholder="顧客"
                      />
                    )}
                  />
                  {errors.name && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.name.message}
                    </FormHelperText>
                  )}
                </FormControl>
            </Grid>
            <Grid item xs={6}>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth sx={{ mb: 4 }}>
                  <Controller
                    name="code"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        autoFocus
                        label="コード"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.code)}
                        placeholder="コード"
                      />
                    )}
                  />
                  {errors.code && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.code.message}
                    </FormHelperText>
                  )}
                </FormControl>
            </Grid>
            <Grid item xs={12}>
              <FormControl fullWidth sx={{ mb: 4 }}>
                  <Controller
                    name="explain"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        autoFocus
                        label="説明"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.explain)}
                        placeholder="説明"
                      />
                    )}
                  />
                  {errors.explain && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.explain.message}
                    </FormHelperText>
                  )}
                </FormControl>
            </Grid>

            <Grid item xs={12}>
              <Button component={Link} type='button' variant='outlined' href='/master/administration' sx={{mr : 5}} color='secondary' size='large'>
              キャンセル
              </Button>
              <Button type='button' variant='contained' sx={{mr : 5}}  color='error' size='large' >
              削除する
              </Button>
              <Button type='submit' variant='contained' size='large' >
              登録する
              </Button>
            </Grid>
          </Grid>
        </form>
      </CardContent>
    </Card>
  )
}

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

export default AdministrationCreate