import React, { useRef } from 'react';
import {
  Card,
  CardContent,
  Divider,
  Box,
  Typography,
  Button,
  FormControl,
  OutlinedInput,
} from '@mui/material';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import CustomFormLabel from '../forms/custom-elements/CustomFormLabel';
import APIs from '../../api/APIs';
import { addArtist } from '../../redux/reducers/ArtistReducer';

const FORM_NAME = {
  CATEGORY: 'category',
  EMAIL: 'email',
  NAME: 'name',
  PHONE: 'phone',
  TEAM: 'team'
}

const ArtistRegister = ({ setShowArtistRegister }) => {
  const formRef = useRef(null);
  const dispatch = useDispatch();

  const handleSubmit = async () => {
    if (formRef.current) {
      const formData = new FormData(formRef.current);
      const category = formData.get(FORM_NAME.CATEGORY);
      const email = formData.get(FORM_NAME.EMAIL);
      const name = formData.get(FORM_NAME.NAME);
      const phone = formData.get(FORM_NAME.PHONE);
      const team = formData.get(FORM_NAME.TEAM);

      await APIs.registerArtist({
        category, email, name, phone, team
      }).then((res) => {
        dispatch(addArtist({
          category, email, name, phone, team, id: res
        }))
        setShowArtistRegister(false);
      }).catch(() => {
        alert('저장에 실패하였습니다.');
      })
    }
  }

  return (
    <div style={{
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      zIndex: 1,
    }}>
      <Card
        sx={{
          p: 0,
          boxShadow: '0 3px 6px rgba(0, 0, 0, 0.16)',
        }}
      >
        <Box
          sx={{
            padding: '15px 30px',
          }}
          display="flex"
          alignItems="center"
        >
          <Box flexGrow={1}>
            <Typography fontWeight="500" variant="h4">
              작가등록
            </Typography>
          </Box>
        </Box>
        <Divider />
        <CardContent
          sx={{
            padding: '30px',
          }}
        >
          <form ref={formRef}>
            <FormControl fullWidth>
              <CustomFormLabel
                sx={{
                  mt: 0,
                }}
                htmlFor={FORM_NAME.CATEGORY}
              >
                Category
              </CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.CATEGORY}
                name={FORM_NAME.CATEGORY}
                placeholder="Category"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.EMAIL}>Email</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.EMAIL}
                name={FORM_NAME.EMAIL}
                placeholder="Email"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.NAME}>Name</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.NAME}
                name={FORM_NAME.NAME}
                placeholder="Name"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.PHONE}>Phone</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.PHONE}
                name={FORM_NAME.PHONE}
                placeholder="Phone"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.TEAM}>Team</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.TEAM}
                name={FORM_NAME.TEAM}
                placeholder="Team"
                fullWidth
                size="small"
              />
            </FormControl>
            <Divider />
            <Box pt={3}>
              <Button
                color="primary"
                variant="contained"
                sx={{
                  mr: 1,
                }}
                onClick={handleSubmit}
              >
                Submit
              </Button>
              <Button variant="contained" color="error" onClick={() => setShowArtistRegister(false)}>
                Cancel
              </Button>
            </Box>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default ArtistRegister;

ArtistRegister.propTypes = {
  setShowArtistRegister: PropTypes.func,
};
