import { useCallback, useState, type ReactElement } from 'react';
import { ArrowDownWideNarrow, Edit, FilePlus2, ListPlus, Trash } from 'lucide-react';
import { Burger, Menu, Modal } from '@mantine/core';
import type { ChargesTableRowFieldsFragment } from '../../gql/graphql.js';
import { useDeleteCharge } from '../../hooks/use-delete-charge.js';
import { Depreciation } from '../common/depreciation/index.js';
import {
  ConfirmationModal,
  EditChargeModal,
  InsertDocumentModal,
  InsertMiscExpense,
  PreviewDocumentModal,
  UploadDocumentsModal,
  UploadPayrollFile,
} from '../common/index.js';
import { Dialog, DialogContent } from '../ui/dialog.js';

interface ChargeActionsMenuProps {
  chargeId: string;
  chargeType: ChargesTableRowFieldsFragment['__typename'];
  onChange?: () => void;
  isIncome: boolean;
}

type ClickEvent = React.MouseEvent<HTMLAnchorElement, MouseEvent>;

export function ChargeActionsMenu({
  chargeId,
  chargeType,
  onChange,
  isIncome,
}: ChargeActionsMenuProps): ReactElement {
  const { deleteCharge } = useDeleteCharge();
  const [opened, setOpened] = useState(false);
  const [depreciationOpened, setDepreciationOpened] = useState(false);
  const closeDepreciation = useCallback((): void => setDepreciationOpened(false), []);
  const [miscExpensesOpened, setMiscExpensesOpened] = useState(false);
  const [uploadSalariesOpened, setUploadSalariesOpened] = useState(false);
  const closeUploadSalaries = useCallback((): void => setUploadSalariesOpened(false), []);
  const [previewIssueDocument, setPreviewIssueDocument] = useState(false);
  const [editingCharge, setEditingCharge] = useState(false);
  const [insertingDocument, setInsertingDocument] = useState(false);

  const [uploadDocumentsOpen, setUploadDocumentsOpen] = useState(false);

  const closeMenu = useCallback((): void => {
    setOpened(false);
  }, []);

  const onDelete = useCallback(async (): Promise<void> => {
    await deleteCharge({
      chargeId,
    });
    onChange?.();
    closeMenu();
  }, [chargeId, deleteCharge, onChange, closeMenu]);

  return (
    <>
      <Menu shadow="md" width={200} opened={opened}>
        <Menu.Target>
          <Burger
            opened={opened}
            onClick={(event): void => {
              event.stopPropagation();
              setOpened(o => !o);
            }}
          />
        </Menu.Target>

        <Menu.Dropdown>
          <Menu.Label>Charge</Menu.Label>
          <Menu.Item
            icon={<Edit size={14} />}
            onClick={() => {
              setEditingCharge(true);
              closeMenu();
            }}
          >
            Edit Charge
          </Menu.Item>
          <ConfirmationModal
            onConfirm={onDelete}
            title="Are you sure you want to delete this charge?"
          >
            <Menu.Item icon={<Trash size={14} />}>Delete Charge</Menu.Item>
          </ConfirmationModal>

          <Menu.Divider />

          <Menu.Label>Documents</Menu.Label>

          <Menu.Item
            icon={<ListPlus size={14} />}
            onClick={(event: ClickEvent): void => {
              event.stopPropagation();
              setInsertingDocument(true);
              closeMenu();
            }}
          >
            Insert Document
          </Menu.Item>
          <Menu.Item
            icon={<FilePlus2 size={14} />}
            onClick={(event: ClickEvent): void => {
              event.stopPropagation();
              setUploadDocumentsOpen(true);
              closeMenu();
            }}
          >
            Upload Documents
          </Menu.Item>
          {isIncome && (
            <Menu.Item
              icon={<ListPlus size={14} />}
              onClick={(event: ClickEvent): void => {
                event.stopPropagation();
                setPreviewIssueDocument(true);
                closeMenu();
              }}
            >
              Issue Document
            </Menu.Item>
          )}

          <Menu.Divider />

          <Menu.Label>Misc Expenses</Menu.Label>
          <Menu.Item
            icon={<ListPlus size={14} />}
            onClick={(event: ClickEvent): void => {
              event.stopPropagation();
              closeMenu();
              setMiscExpensesOpened(true);
            }}
          >
            Add expense
          </Menu.Item>
          {chargeType === 'CommonCharge' && (
            <>
              <Menu.Divider />
              <Menu.Label>Depreciation</Menu.Label>
              <Menu.Item
                icon={<ArrowDownWideNarrow size={14} />}
                onClick={(event: ClickEvent): void => {
                  event.stopPropagation();
                  setDepreciationOpened(true);
                  closeMenu();
                }}
              >
                Depreciation
              </Menu.Item>
            </>
          )}
          {chargeType === 'SalaryCharge' && (
            <>
              <Menu.Divider />
              <Menu.Label>Salaries</Menu.Label>
              <Menu.Item
                icon={<FilePlus2 size={14} />}
                onClick={(event: ClickEvent): void => {
                  event.stopPropagation();
                  closeMenu();
                  setUploadSalariesOpened(true);
                }}
              >
                Payroll file upload
              </Menu.Item>
            </>
          )}
        </Menu.Dropdown>
      </Menu>
      <Modal
        withinPortal
        size="xl"
        centered
        opened={depreciationOpened}
        onClose={closeDepreciation}
        title="Depreciation"
        onClick={event => event.stopPropagation()}
      >
        <Depreciation
          chargeId={chargeId}
          onChange={() => {
            closeDepreciation();
            onChange?.();
          }}
        />
      </Modal>
      <Dialog open={miscExpensesOpened} onOpenChange={setMiscExpensesOpened}>
        <DialogContent className="sm:max-w-[425px]" onClick={event => event.stopPropagation()}>
          <InsertMiscExpense
            onDone={() => {
              setMiscExpensesOpened(false);
              onChange?.();
            }}
            chargeId={chargeId}
          />
        </DialogContent>
      </Dialog>
      <Modal
        centered
        opened={uploadSalariesOpened}
        onClose={closeUploadSalaries}
        title="Upload Payroll File"
        onClick={event => event.stopPropagation()}
      >
        <UploadPayrollFile
          onDone={() => {
            closeUploadSalaries();
            onChange?.();
          }}
          chargeId={chargeId}
        />
      </Modal>
      <UploadDocumentsModal
        open={uploadDocumentsOpen}
        onOpenChange={setUploadDocumentsOpen}
        onChange={onChange}
        chargeId={chargeId}
      />
      <PreviewDocumentModal
        chargeId={chargeId}
        open={previewIssueDocument}
        setOpen={setPreviewIssueDocument}
        onDone={() => onChange?.()}
      />
      <EditChargeModal
        chargeId={editingCharge ? chargeId : undefined}
        close={() => setEditingCharge(false)}
        onChange={() => {
          setEditingCharge(false);
          onChange?.();
        }}
      />
      <InsertDocumentModal
        chargeId={insertingDocument ? chargeId : undefined}
        onChange={onChange}
        close={() => setInsertingDocument(false)}
      />
    </>
  );
}