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 { sha256 } from 'js-sha256';
import CustomFormLabel from '../forms/custom-elements/CustomFormLabel';
import { addAdmin } from '../../redux/reducers/AdminReducer';
import APIs from '../../api/APIs';

const FORM_NAME = {
  EMAIL: 'email',
  PASSWORD: 'password',
  NAME: 'name',
  PHONE: 'phone',
  POSITION: 'position',
  CHARGE_OF: 'chargeof',
  TEAM: 'team'
}

const AddAdmin = ({ setShowAddAdmin }) => {
  const formRef = useRef(null);
  const dispatch = useDispatch();

  const handleSubmit = async () => {
    if (formRef.current) {
      const formData = new FormData(formRef.current);
      const email = formData.get(FORM_NAME.EMAIL);
      const password = sha256(formData.get(FORM_NAME.PASSWORD));
      const name = formData.get(FORM_NAME.NAME);
      const phone = formData.get(FORM_NAME.PHONE);
      const position = formData.get(FORM_NAME.POSITION);
      const chargeof = formData.get(FORM_NAME.CHARGE_OF);
      const team = formData.get(FORM_NAME.TEAM);

      if (!email || !password || !name || !phone || !position || !chargeof || !team) {
        alert('항목을 전부 입력해세요.');
        return;
      }

      await APIs.registerAdmin({
        email, password, name, phone, position, chargeof, team
      }).then((res) => {
        dispatch(addAdmin({
          email, password, name, phone, position, chargeof, team, id: res
        }))
        setShowAddAdmin(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)',
          height: '650px',
          overflowX: 'hidden',
          overflowY: 'scroll',
        }}
      >
        <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 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.PASSWORD}>Password</CustomFormLabel>
              <OutlinedInput
                type="password"
                id={FORM_NAME.PASSWORD}
                name={FORM_NAME.PASSWORD}
                placeholder="Password"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.NAME}>이름</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.NAME}
                name={FORM_NAME.NAME}
                placeholder="이름"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.PHONE}>휴대폰 번호</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.PHONE}
                name={FORM_NAME.PHONE}
                placeholder="휴대폰 번호"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.POSITION}>직책</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.POSITION}
                name={FORM_NAME.POSITION}
                placeholder="직책"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.CHARGE_OF}>담당업무</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.CHARGE_OF}
                name={FORM_NAME.CHARGE_OF}
                placeholder="담당업무"
                fullWidth
                size="small"
              />
            </FormControl>
            <FormControl fullWidth>
              <CustomFormLabel htmlFor={FORM_NAME.TEAM}>소속</CustomFormLabel>
              <OutlinedInput
                id={FORM_NAME.TEAM}
                name={FORM_NAME.TEAM}
                placeholder="소속"
                fullWidth
                size="small"
              />
            </FormControl>
            <Box pt={3}>
              <Button
                color="primary"
                variant="contained"
                sx={{
                  mr: 1,
                }}
                onClick={handleSubmit}
              >
                Submit
              </Button>
              <Button variant="contained" color="error" onClick={() => setShowAddAdmin(false)}>
                Cancel
              </Button>
            </Box>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default AddAdmin;

AddAdmin.propTypes = {
  setShowAddAdmin: PropTypes.func,
};
