import * as React from 'react';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import TextField from '@mui/material/TextField';
import LoadingButton from '@mui/lab/LoadingButton';
import { useSnackbar } from 'notistack';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';

import { RequestDetailsCardProps } from 'src/components/Card/RequestDetailsCard';
import axios from 'src/lib/axios';
import { Users } from 'src/types/zendesk';
import logger from 'next-pino/logger';

import { auth0MetaState, zendeskDataState } from 'src/atom';
import { useRecoilValue } from 'recoil';

export interface RequestEditDialogProps {
  type: string;
  users: Users[];
  data: RequestDetailsCardProps['data'];
}

export default function RequestEditDialog(props: RequestEditDialogProps) {
  switch (props.type) {
    case 'CC':
      return <RequestCCEditDialog {...props} />;
    default:
      return null;
  }
}

export function RequestCCEditDialog(props: RequestEditDialogProps) {
  const { type, users, data } = props;

  const [open, setOpen] = React.useState(false);
  const [cc, setCC] = React.useState(() => {
    return data.email_cc_ids.map((id) => {
      return users.find((user) => user.id === id)?.email;
    });
  });
  const [input, setInput] = React.useState(cc.join(', '));
  const [isValid, setIsValid] = React.useState(true);
  const [loading, setLoading] = React.useState(false);

  const zendeskData = useRecoilValue(zendeskDataState);
  const { t } = useTranslation();
  const router = useRouter();
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  React.useEffect(() => {
    const newCC = input.split(',').map((email) => email.trim());
    if (newCC.length === 1 && newCC[0] === '') {
      setIsValid(true);
      setCC([]);
      return;
    }
    const isNewCCVaild = newCC.every((email) => {
      return email.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i);
    });
    setIsValid(isNewCCVaild);
    if (isNewCCVaild) {
      setCC(newCC);
    }
  }, [input]);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleSubmit = async () => {
    setLoading(true);
    let isSubmitSuccess = false;
    try {
      // judge if the emails passed by props
      // are the same as the emails in the input
      const originCCs = data.email_cc_ids.map((id) => {
        return users.find((user) => user.id === id)?.email;
      });
      const isSameWithOriginCCs =
        cc.every((email) => originCCs.includes(email || '')) &&
        cc.length === originCCs.length;
      if (isSameWithOriginCCs) {
        setOpen(false);
        return;
      }

      const emailsData = cc.reduce<
        {
          user_email: string;
          action: 'put' | 'delete';
        }[]
      >((prev, item) => {
        if (item) {
          prev.push({
            user_email: item,
            action: 'put',
          });
        }
        return prev;
      }, []);

      originCCs.forEach((email) => {
        if (!email) return;
        if (!cc.includes(email)) {
          // delete
          emailsData.push({ user_email: email, action: 'delete' });
        }
      });

      const resData = await axios
        .put(
          '/api/zendesk/v2/requests',
          {
            emails: emailsData,
            id: data.id,
          },
          {
            headers: {
              Authorization: zendeskData.token,
            },
          }
        )
        .then((res) => res.data);
      isSubmitSuccess = true;
    } catch (error: any) {
      logger.error(
        { error, name: `edit request[${data.id}] ccs` },
        'Error add comment to request'
      );
      enqueueSnackbar(
        `${error?.response?.data?.message || error?.message || error}`,
        {
          variant: 'error',
          action: (snackbarId) => (
            <IconButton
              onClick={() => closeSnackbar(snackbarId)}
              color="secondary"
            >
              <CloseRoundedIcon />
            </IconButton>
          ),
        }
      );
    } finally {
      setLoading(false);
      setOpen(false);
    }
    isSubmitSuccess && router.reload();
  };

  return (
    <Box>
      <IconButton aria-label="edit" size="small" onClick={handleClickOpen}>
        <EditRoundedIcon fontSize="inherit" />
      </IconButton>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="edit-dialog-title"
        aria-describedby="edit-dialog-description"
      >
        <DialogTitle id="edit-dialog-title">
          {t('requests.edit_title')}
        </DialogTitle>
        <DialogContent>
          <DialogContentText
            id="edit-dialog-description"
            sx={{
              minWidth: '30rem',
            }}
          >
            {/* {t('requests.edit_ccs_title')} */}
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label={t('new_request.email_addresses')}
            fullWidth
            variant="standard"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            error={!isValid}
            helperText={t('new_request.cc_optional_error_msg')}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>{t('requests.edit_ccs_cancel')}</Button>
          <LoadingButton
            onClick={handleSubmit}
            autoFocus
            disabled={!isValid || !zendeskData.token}
            loading={loading}
          >
            {t('requests.edit_ccs_submit')}
          </LoadingButton>
        </DialogActions>
      </Dialog>
    </Box>
  );
}