// ** 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";
interface State {
  alert: string
  code: string
}

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

const AlertCreate = () => {
  // ** States
  const defaultValues = {
    alert : '',
    code: '',
  }

  const [userType, setUserType] = useState<string>("");

  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 {alert, code} = 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="alert"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        autoFocus
                        label="アラート種別"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.alert)}
                        placeholder="アラート種別"
                      />
                    )}
                  />
                  {errors.alert && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.alert.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={6}>
            </Grid>

            <Grid item xs={12}>
              <Button component={Link} type='button' variant='outlined' href='/master/administration/report-type' 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>
  )
}

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

export default AlertCreate