import React, { useState } from 'react';
import {
  Box,
  FormControlLabel,
  Checkbox,
  Typography,
  Divider,
  Button,
} from '@mui/material';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import APIs from '../../api/APIs';
import { setAuth } from '../../redux/reducers/AdminReducer';

const AddAuth = ({ id, auth, setShowAddAuth }) => {
  const dispatch = useDispatch();
  const [userAuth, setUserAuth] = useState(!!auth.user);
  const [collectionAuth, setCollectionAuth] = useState(!!auth.collection);
  const [systemAuth, setSystemAuth] = useState(!!auth.system);
  const [adminAuth, setAdminAuth] = useState(!!auth.admin);
  const [logAuth, setLogAuth] = useState(!!auth.log);

  const handleChangeUserAuth = (e) => {
    setUserAuth(e.target.checked)
  }

  const handleChangeCollectionAuth = (e) => {
    setCollectionAuth(e.target.checked)
  }

  const handleChangeSystemAuth = (e) => {
    setSystemAuth(e.target.checked)
  }

  const handleChangeAdminAuth = (e) => {
    setAdminAuth(e.target.checked)
  }

  const handleChangeLogAuth = (e) => {
    setLogAuth(e.target.checked)
  }

  const handleClickSubmit = async () => {
    const admin_id = id;
    const admin_permission = adminAuth;
    const collection_permission = collectionAuth;
    const log_permission = logAuth;
    const system_permission = systemAuth;
    const user_permission = userAuth;

    await APIs.changeAuth({
      admin_id, admin_permission, collection_permission, log_permission, system_permission, user_permission
    }).then(() => {
      setShowAddAuth(false);
      dispatch(setAuth({
        id,
        auth: {
          admin: Number(admin_permission),
          collection: Number(collection_permission),
          log: Number(log_permission),
          system: Number(system_permission),
          user: Number(user_permission),
        }
      }))
      alert('저장 성공');
    }).catch(() => {
      alert('저장에 실패하였습니다.');
    })
  }

  return (
    <Box sx={{
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      zIndex: 1,
      padding: '20px',
      backgroundColor: '#fff',
      boxShadow: '0 3px 6px rgba(0, 0, 0, 0.16)',
    }}>
      <Typography fontWeight="500" variant="h4">
        권한 추가
      </Typography>
      <Divider sx={{ margin: '10px 0' }} />
      <Box>
        <FormControlLabel
          control={<Checkbox color="primary" checked={userAuth} onChange={handleChangeUserAuth} />}
          label="유저 관리"
          labelPlacement="end"
        />
        <FormControlLabel
          control={<Checkbox color="secondary" checked={collectionAuth} onChange={handleChangeCollectionAuth} />}
          label="컬렉션 관리"
          labelPlacement="end"
        />
        <FormControlLabel
          control={<Checkbox color="success" checked={systemAuth} onChange={handleChangeSystemAuth} />}
          label="시스템 설정"
          labelPlacement="end"
        />
        <FormControlLabel
          control={<Checkbox color="error" checked={adminAuth} onChange={handleChangeAdminAuth} />}
          label="관리자 설정"
          labelPlacement="end"
        />
        <FormControlLabel
          control={<Checkbox color="warning" checked={logAuth} onChange={handleChangeLogAuth} />}
          label="로그"
          labelPlacement="end"
        />
      </Box>
      <Box sx={{
        pt: 3, textAlign: 'center'
      }}>
        <Button
          color="primary"
          variant="contained"
          sx={{
            mr: 3,
          }}
          onClick={handleClickSubmit}
        >
          Submit
        </Button>
        <Button variant="contained" color="error" onClick={() => setShowAddAuth(false)}>
          Cancel
        </Button>
      </Box>
    </Box>
  );
};

export default AddAuth;

AddAuth.propTypes = {
  id: PropTypes.number.isRequired,
  setShowAddAuth: PropTypes.func,
  auth: PropTypes.shape({
    user: PropTypes.number.isRequired,
    collection: PropTypes.number.isRequired,
    system: PropTypes.number.isRequired,
    admin: PropTypes.number.isRequired,
    log: PropTypes.number.isRequired,
  }).isRequired,
};
