import * as React from 'react';
import { useTranslation } from 'next-i18next';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import LoadingButton from '@mui/lab/LoadingButton';
import FormLabel from '@mui/material/FormLabel';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import IconButton from '@mui/material/IconButton';
import { useSnackbar } from 'notistack';
import { useRouter } from 'next/router';

import { ZendeskComment, Users } from 'src/types/zendesk';
import { RequestAttachmentChipList } from 'src/components/Chip/RequestAttachment';
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 RequestCommentCard(props: {
  item: ZendeskComment;
  users: Users[];
}) {
  const { item, users } = props;

  const { t } = useTranslation();

  return (
    <Box
      className="markdown-body"
      sx={{
        minWidth: 275,
        '& pre code br': {
          display: 'block',
        },
      }}
    >
      <Card variant="outlined">
        <CardContent>
          {/* <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
            <Typography
              sx={{ fontSize: 14 }}
              color="text.secondary"
              component="span"
              pr="1rem"
            >
              {item.author_id}
            </Typography>
            {new Date(item.created_at).toLocaleString()}
          </Typography> */}
          <Box
            sx={{
              display: 'flex',
              gap: '1rem',
              flexDirection: {
                xs: 'column',
                md: 'row',
              },
              pb: '1rem',
            }}
          >
            <Typography
              sx={{ fontSize: 14 }}
              color="text.secondary"
              component="span"
            >
              {users.map((user) => {
                if (user.id === item.author_id) {
                  return user.name;
                } else {
                  return '';
                }
              })}
            </Typography>
            <Typography
              sx={{ fontSize: 14 }}
              color="text.secondary"
              component="span"
            >
              {new Date(item.created_at).toLocaleString()}
            </Typography>
          </Box>

          <Typography variant="body2" component="div">
            <div dangerouslySetInnerHTML={{ __html: item.html_body }} />
          </Typography>

          {item?.attachments && item.attachments?.length > 0 && (
            <Box padding={`1rem 0`}>
              {/* <Divider /> */}
              <RequestAttachmentChipList
                title={`${t('requests.attachments')} (${
                  item.attachments.length
                })`}
                items={item.attachments}
              />
            </Box>
          )}
        </CardContent>
      </Card>
    </Box>
  );
}

export function AddRequestCommentCard(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 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);
    }
    isSubmitSuccess && router.reload();
  };

  return (
    <Card variant="outlined">
      <CardContent>
        <Box>
          <TiptapEditor onChange={handleEditorChange} maxHeight={202} />
        </Box>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-end',
          }}
        >
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              gap: '0.5rem',
              mt: 2,
            }}
          >
            <FormLabel>{t('new_request.attachments_optional')}</FormLabel>
            <UploadAttachmentButton
              onChange={(items) => {
                setAttachmentTokens(items);
              }}
            />
          </Box>
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'flex-end',
            }}
          >
            <LoadingButton
              onClick={handleSubmit}
              disabled={!descObj.text}
              loading={loading}
              variant="contained"
            >
              {t('requests.add_comment')}
            </LoadingButton>
          </Box>
        </Box>
      </CardContent>
    </Card>
  );
}