import * as React from 'react';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import Box from '@mui/material/Box';
import LoadingButton from '@mui/lab/LoadingButton';
import { useSnackbar } from 'notistack';
import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';

import axios from 'axios';
import logger from 'next-pino/logger';
import RequestAttachmentChip from 'src/components/Chip/RequestAttachment';
import { AttachmentItem } from 'src/types/zendesk';

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

export default function UploadAttachmentButton(props: {
  onChange: (
    attachments: {
      token: string;
      attachment: AttachmentItem;
    }[]
  ) => void;
}) {
  const { onChange } = props;

  const [isUploadLoading, setIsUploadLoading] = React.useState(false);
  const [attachmentTokens, setAttachmentTokens] = React.useState<
    {
      token: string;
      attachment: AttachmentItem;
    }[]
  >([]);

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

  React.useEffect(() => {
    onChange(attachmentTokens);
  }, [attachmentTokens]);

  const handleUploadAttachment = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    if (!event.target.files || !event.target.files[0]) {
      return;
    }
    setIsUploadLoading(true);
    const file = event.target.files[0];
    const { name, type, size } = file;
    console.log(name, type, size);

    if (size > 7000000) {
      // oversize
      enqueueSnackbar(t('new_request.attachment_oversize_error'), {
        variant: 'error',
      });
      setIsUploadLoading(false);
      return;
    }

    const localFile = await fetch(URL.createObjectURL(file));
    const fileBlob = await localFile.blob();

    try {
      const data = await axios
        .post(
          `${
            process.env.NEXT_PUBLIC_ZENDESK_HOST
          }/api/v2/uploads?filename=${encodeURIComponent(name)}`,
          fileBlob,
          {
            headers: {
              'Content-Type': type,
              Authorization: `Bearer ${zendeskData.token}`,
            },
          }
        )
        .then((res) => res.data);
      const token = data?.upload?.token as string;
      const attachment = data?.upload?.attachment as AttachmentItem;
      setAttachmentTokens((prev) => [...prev, { token, attachment }]);
    } catch (error: any) {
      logger.error(
        { error, name: `NewRequestSection/Form` },
        `Failed to upload attachment`
      );
      enqueueSnackbar(`${error?.msg || error}`, { variant: 'error' });
    } finally {
      setIsUploadLoading(false);
    }
  };

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          flexWrap: 'wrap',
          columnGap: '1rem',
          rowGap: '0.5rem',
        }}
      >
        {attachmentTokens?.map((i) => {
          return (
            <RequestAttachmentChip
              key={i.token}
              label={i.attachment.file_name}
              handleDelete={() => {
                setAttachmentTokens(
                  attachmentTokens.filter(
                    (j) => j.attachment.id !== i.attachment.id
                  )
                );
              }}
            />
          );
        })}
      </Box>
      <LoadingButton
        variant="outlined"
        component="label"
        loading={isUploadLoading}
        startIcon={<FileUploadRoundedIcon />}
        size="small"
        sx={{
          maxWidth: '200px',
          width: 'fit-content',
        }}
      >
        {t('new_request.upload')}
        <input
          hidden
          accept="*/*"
          type="file"
          onChange={handleUploadAttachment}
        />
      </LoadingButton>
    </>
  );
}