import * as React from 'react';
import { useTranslation } from 'next-i18next';
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 DialogTitle from '@mui/material/DialogTitle';
import LoadingButton from '@mui/lab/LoadingButton';
import FormLabel from '@mui/material/FormLabel';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import { useSnackbar } from 'notistack';
import { useRouter } from 'next/router';

// import Editor from 'src/components/Editor/RichTextEditor';
import TiptapEditor from 'src/components/Editor/Tiptap';
import UploadAttachmentButton from 'src/components/Button/UploadAttachment';
import axios from 'src/lib/axios';
import logger from 'next-pino/logger';
import { AttachmentItem } from 'src/types/zendesk';

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

export default function RequestCommentDialog(props: {
  requestId: string | number;
}) {
  const { requestId } = props;

  const [open, setOpen] = React.useState(false);
  const [descObj, setDescObj] = React.useState({
    text: '',
    html: '',
  });
  const [loading, setLoading] = React.useState(false);
  const [attachmentTokens, setAttachmentTokens] = React.useState<
    {
      token: string;
      attachment: AttachmentItem;
    }[]
  >([]);

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

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

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

  const handleEditorChange = ({
    text,
    html,
  }: {
    text: string;
    html: string;
  }) => {
    setDescObj({ text, html });
  };

  const updateComment = async () => {
    const { data } = await axios.put(
      `/api/zendesk/v2/requests/${requestId}`,
      {
        comment: {
          html_body: descObj.html,
          uploads: attachmentTokens.map((token) => token.token),
        },
      },
      {
        headers: {
          Authorization: `${zendeskData?.token}`,
        },
      }
    );

    return data;
  };

  const handleSubmit = async () => {
    setLoading(true);
    let isSubmitSuccess = false;
    try {
      await updateComment();
      isSubmitSuccess = true;
    } catch (error: any) {
      logger.error(
        { error, name: `add comment to request[${requestId}]` },
        '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);
      handleClose();
    }
    isSubmitSuccess && router.reload();
  };

  return (
    <>
      <Button variant="outlined" onClick={handleClickOpen}>
        {t('requests.add_comment')}
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {t('requests.add_comment_title')}
        </DialogTitle>
        <DialogContent>
          <Box
            sx={{
              width: '80vw',
              maxWidth: {
                xs: '375px',
                lg: '500px',
              },
            }}
          >
            <TiptapEditor onChange={handleEditorChange} maxHeight={202} />
          </Box>
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              gap: '0.5rem',
              mt: 2,
            }}
          >
            <FormLabel>{t('new_request.attachments_optional')}</FormLabel>
            <UploadAttachmentButton
              onChange={(items) => {
                setAttachmentTokens(items);
              }}
            />
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>{t('requests.edit_ccs_cancel')}</Button>
          <LoadingButton
            onClick={handleSubmit}
            disabled={!descObj.text}
            loading={loading}
          >
            {t('requests.add')}
          </LoadingButton>
        </DialogActions>
      </Dialog>
    </>
  );
}