import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import InputLabel from '@material-ui/core/InputLabel';
import { makeStyles } from '@material-ui/core/styles';
import useForm from 'react-hook-form';

const useStyles = makeStyles((theme) => ({
  labelContainer: {
    [theme.breakpoints.up('md')]: {
      marginTop: theme.spacing(2.5),
    },
  },
  label: {
    color: theme.palette.text.primary,
  },
}));

export type ItemDataFormData = {
  name: string;
  tagCount: string;
  guestPrice: string;
  memberPrice: string;
  comment: string;
};

export type Item = {
  id: number;
  createdAt: string;
  updatedAt: string;
  revisions: {
    name: string;
    guestPrice: number;
    memberPrice: number;
    comment: string | null;
    tagCount: number;
  }[];
  user: {
    uid: string;
  };
};

export interface ItemDataFormHandler {
  focusFirst(): void;
  reset(): void;
}

export type ItemDataFormProps = {
  onSubmit: (formData: ItemDataFormData) => void;
  item?: Item;
  submitButtonLabel: string;
};

export const ItemDataForm = React.forwardRef<ItemDataFormHandler, ItemDataFormProps>(function ItemDataForm(props, ref) {
  const classes = useStyles();
  const { register, handleSubmit, reset } = useForm<ItemDataFormData>();
  const firstInputEl = React.useRef<HTMLInputElement | null>(null);
  const handleFirstInputRef: React.Ref<HTMLInputElement> = React.useCallback(
    (ref) => {
      register(ref);
      firstInputEl.current = ref;
    },
    [register],
  );

  React.useImperativeHandle(ref, () => ({
    focusFirst: () => {
      firstInputEl.current?.focus();
    },
    reset,
  }));

  return (
    <form onSubmit={handleSubmit(props.onSubmit)}>
      <Grid container spacing={3}>
        <Grid className={classes.labelContainer} item xs={12} md={3}>
          <InputLabel className={classes.label} htmlFor="name">
            商品名 *
          </InputLabel>
        </Grid>
        <Grid item xs={12} md={9}>
          <TextField
            id="name"
            name="name"
            label="商品名"
            variant="outlined"
            required
            style={{
              width: '100%',
              maxWidth: '20em',
            }}
            inputRef={handleFirstInputRef}
            defaultValue={props.item ? props.item.revisions[0].name : undefined}
          />
        </Grid>

        <Grid className={classes.labelContainer} item xs={12} md={3}>
          <InputLabel className={classes.label} htmlFor="tagCount">
            値札の枚数 *
          </InputLabel>
        </Grid>
        <Grid item xs={12} md={9}>
          <TextField
            id="tagCount"
            name="tagCount"
            label="値札の枚数"
            variant="outlined"
            type="number"
            required
            inputProps={{
              min: 0,
            }}
            style={{
              width: '100%',
              maxWidth: '10em',
            }}
            inputRef={register}
            defaultValue={props.item ? props.item.revisions[0].tagCount : undefined}
          />
        </Grid>

        <Grid className={classes.labelContainer} item xs={12} md={3}>
          <InputLabel className={classes.label} htmlFor="guestPrice">
            通常価格 *
          </InputLabel>
        </Grid>
        <Grid item xs={12} md={9}>
          <TextField
            id="guestPrice"
            name="guestPrice"
            label="通常価格"
            variant="outlined"
            type="number"
            required
            inputProps={{
              min: 0,
            }}
            style={{
              width: '100%',
              maxWidth: '10em',
            }}
            inputRef={register}
            defaultValue={props.item ? props.item.revisions[0].guestPrice : undefined}
          />
        </Grid>

        <Grid className={classes.labelContainer} item xs={12} md={3}>
          <InputLabel className={classes.label} htmlFor="memberPrice">
            部員価格 *
          </InputLabel>
        </Grid>
        <Grid item xs={12} md={9}>
          <TextField
            id="memberPrice"
            name="memberPrice"
            label="部員価格"
            variant="outlined"
            type="number"
            required
            inputProps={{
              min: 0,
            }}
            style={{
              width: '100%',
              maxWidth: '10em',
            }}
            inputRef={register}
            defaultValue={props.item ? props.item.revisions[0].memberPrice : undefined}
          />
        </Grid>

        <Grid className={classes.labelContainer} item xs={12} md={3}>
          <InputLabel className={classes.label} htmlFor="comment">
            コメント
          </InputLabel>
        </Grid>
        <Grid item xs={12} md={9}>
          <TextField
            id="comment"
            name="comment"
            label="コメント"
            variant="outlined"
            fullWidth
            multiline
            rows="4"
            inputRef={register}
            defaultValue={props.item ? props.item.revisions[0].comment : undefined}
          />
        </Grid>

        <Grid item xs={12} md={12}>
          <Button type="submit" variant="contained" color="primary">
            {props.submitButtonLabel}
          </Button>
        </Grid>
      </Grid>
    </form>
  );
});