import { Button, FormControl, FormControlLabel, Grid, InputLabel, Radio, RadioGroup, TextField } from '@material-ui/core'
import Typography from '@material-ui/core/Typography'
import React from 'react'
import { Controller, useForm } from 'react-hook-form'

const Form = () => {
  const classes = useStyles()

  const { register, handleSubmit, errors, reset, control, watch, setValue } = useForm({
    mode: 'all',
  })

  const submit = (formData) => {
    console.log(formData)
  }

  const radioItems = ['A', 'B']

  const radioType = watch('radioItem')

  return (
    <form onSubmit={handleSubmit(submit)}>
      <Grid item sm={12}>
        <InputLabel shrink htmlFor="radioItem">
          radio
        </InputLabel>
        <FormControl error={Boolean(errors.radioItem)}>
          <Controller
            name="radioItem"
            control={control}
            rules={{ required: true }}
            defaultValue="A"
            as={
              <RadioGroup row aria-label="radioItem" name="radioItem" >
                {radioItems.map((radioItem, index) => <FormControlLabel key={index} control={<Radio color="default" value={radioItem} />} label={radioItem} />)}
              </RadioGroup>
            }
          />
        </FormControl>
        {radioType === 'B' ?
          <>
            <InputLabel shrink htmlFor="text">
              選択肢連動型フォーム
            </InputLabel>
            <FormControl fullWidth>
              <TextField
                name="text"
                inputRef={register({ required: true })}
                error={errors.requestDateTimes ? Boolean(errors.text) : null}
                type="text"
                variant="outlined"
              />
            </FormControl>
          </>
          : <></>
        }
      </Grid>
      <Grid container alignItems='center' justify='center' className={classes.footer}>
        <Grid item sm={3}>
          <Button type='submit' variant="contained" fullWidth className={classes.submitButton} disabled={!!Object.keys(errors).length}>
            <Typography className={classes.submitText} variant="button">送信する</Typography>
          </Button>
        </Grid>
      </Grid>
    </form>
  )
}

export default Form