import { PlusIcon } from "@buzzwaretech/propel/icons";
import { observer } from "mobx-react";
import React, { useCallback, useState } from "react";
import type { FileRejection } from "react-dropzone";
import { useDropzone } from "react-dropzone";
// buzzwareTech imports
import { TOAST_TYPE, setToast } from "@buzzwaretech/propel/toast";
import type { TIssueServiceType } from "@buzzwaretech/types";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// buzzwareTech web hooks
import { useFileSize } from "@/buzzwareTech-web/hooks/use-file-size";
// local imports
import { useAttachmentOperations } from "./helper";

type Props = {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
  customButton?: React.ReactNode;
  disabled?: boolean;
  issueServiceType: TIssueServiceType;
};

export const IssueAttachmentActionButton = observer(
  function IssueAttachmentActionButton(props: Props) {
    const {
      workspaceSlug,
      projectId,
      issueId,
      customButton,
      disabled = false,
      issueServiceType,
    } = props;
    // state
    const [isLoading, setIsLoading] = useState(false);
    // store hooks
    const { setLastWidgetAction, fetchActivities } =
      useIssueDetail(issueServiceType);
    // file size
    const { maxFileSize } = useFileSize();
    // operations
    const { operations: attachmentOperations } = useAttachmentOperations(
      workspaceSlug,
      projectId,
      issueId,
      issueServiceType,
    );
    // handlers
    const handleFetchPropertyActivities = useCallback(() => {
      fetchActivities(workspaceSlug, projectId, issueId);
    }, [fetchActivities, workspaceSlug, projectId, issueId]);

    const onDrop = useCallback(
      (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
        const totalAttachedFiles = acceptedFiles.length + rejectedFiles.length;

        if (rejectedFiles.length === 0) {
          const currentFile: File = acceptedFiles[0];
          if (!currentFile || !workspaceSlug) return;

          setIsLoading(true);
          attachmentOperations
            .create(currentFile)
            .catch(() => {
              setToast({
                type: TOAST_TYPE.ERROR,
                title: "Error!",
                message: "File could not be attached. Try uploading again.",
              });
            })
            .finally(() => {
              handleFetchPropertyActivities();
              setLastWidgetAction("attachments");
              setIsLoading(false);
            });
          return;
        }

        setToast({
          type: TOAST_TYPE.ERROR,
          title: "Error!",
          message:
            totalAttachedFiles > 1
              ? "Only one file can be uploaded at a time."
              : `File must be of ${maxFileSize / 1024 / 1024}MB or less in size.`,
        });
        return;
      },
      [
        attachmentOperations,
        maxFileSize,
        workspaceSlug,
        handleFetchPropertyActivities,
        setLastWidgetAction,
      ],
    );

    const { getRootProps, getInputProps } = useDropzone({
      onDrop,
      maxSize: maxFileSize,
      multiple: false,
      disabled: isLoading || disabled,
    });

    return (
      <div
        onClick={(e) => {
          // TODO: Remove extra div and move event propagation to button
          e.stopPropagation();
        }}
      >
        <button {...getRootProps()} type="button" disabled={disabled}>
          <input {...getInputProps()} />
          {customButton ? customButton : <PlusIcon className="h-4 w-4" />}
        </button>
      </div>
    );
  },
);