// ** 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 {
  userId : string
  username: string
  email: string
  password: string
  type: string
  reportEmail: string
}

const schema = yup.object().shape({
  userId: yup.string().required(),
  username: yup.string().required(),
  email: yup.string().required(),
  type: yup.string().required(),
  reportEmail: yup.string().required(),
});

const UserEdit = () => {
  // ** States
  const defaultValues = {
    userId : '',
    username: '',
    email: '',
    password: '',
    type: '',
    reportEmail: '',
  }

  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 {userId, username, password, email, type, reportEmail} = 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="userId"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        autoFocus
                        label="ユーザーID"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.userId)}
                        placeholder="ユーザーID"
                      />
                    )}
                  />
                  {errors.userId && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.userId.message}
                    </FormHelperText>
                  )}
                </FormControl>
            </Grid>
            <Grid item xs={6}>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth sx={{ mb: 4 }}>
                  <Controller
                    name="username"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        autoFocus
                        label="ユーザー名"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.username)}
                        placeholder="ユーザー名"
                      />
                    )}
                  />
                  {errors.username && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.username.message}
                    </FormHelperText>
                  )}
                </FormControl>
            </Grid>
            <Grid item xs={6}>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth sx={{ mb: 4 }}>
                  <Controller
                    name="email"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        type="email"
                        autoFocus
                        label="メールアドレス"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.email)}
                        placeholder="メールアドレス"
                      />
                    )}
                  />
                  {errors.email && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.email.message}
                    </FormHelperText>
                  )}
                </FormControl>
            </Grid>
            <Grid item xs={6}>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth sx={{ mb: 4 }}>
                  <Controller
                    name="password"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        autoFocus
                        label="パスワード"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.password)}
                        placeholder="パスワード"
                      />
                    )}
                  />
                  {errors.password && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.password.message}
                    </FormHelperText>
                  )}
                </FormControl>
            </Grid>
            <Grid item xs={6}>
            </Grid>
            <Grid item xs={6}>
              <FormControl size="medium" sx={{ mb: 4 }} fullWidth>
                <InputLabel id="invoice-status-select">アカウント種類</InputLabel>
                <Select
                  sx={{ pr: 4 }}
                  value={userType}
                  label="ルート"
                  onChange={handleUserType}
                  labelId="invoice-status-select"
                >
                  <MenuItem value="1">現場管理者</MenuItem>
                  <MenuItem value="2">現場管理者</MenuItem>
                  <MenuItem value="3">現場管理者</MenuItem>
                </Select>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth sx={{ mb: 4 }}>
                  <Controller
                    name="reportEmail"
                    control={control}
                    rules={{ required: true }}
                    render={({ field: { value, onChange, onBlur } }) => (
                      <TextField
                        type="email"
                        autoFocus
                        label="報告先メールアドレス"
                        value={value}
                        onBlur={onBlur}
                        onChange={onChange}
                        error={Boolean(errors.reportEmail)}
                        placeholder="報告先メールアドレス"
                      />
                    )}
                  />
                  {errors.reportEmail && (
                    <FormHelperText sx={{ color: "error.main" }}>
                      {errors.reportEmail.message}
                    </FormHelperText>
                  )}
                </FormControl>
            </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>
  )
}

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

export default UserEdit