import { omit } from "lodash-es";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useState } from "react";
// buzzwareTech imports
import {
    ARCHIVABLE_STATE_GROUPS,
    EUserPermissions,
    EUserPermissionsLevel,
} from "@buzzwaretech/constants";
import type { TIssue } from "@buzzwaretech/types";
import { EIssuesStoreType } from "@buzzwaretech/types";
import { ContextMenu, CustomMenu } from "@buzzwaretech/ui";
import { cn } from "@buzzwaretech/utils";
// hooks
import { useIssues } from "@/hooks/store/use-issues";
import { useProject } from "@/hooks/store/use-project";
import { useProjectState } from "@/hooks/store/use-project-state";
import { useUserPermissions } from "@/hooks/store/user";
// buzzwareTech-web imports
import { DuplicateWorkItemModal } from "@/buzzwareTech-web/components/issues/issue-layouts/quick-action-dropdowns/duplicate-modal";
// helper
import { ArchiveIssueModal } from "../../archive-issue-modal";
import { DeleteIssueModal } from "../../delete-issue-modal";
import { CreateUpdateIssueModal } from "../../issue-modal/modal";
import type { IQuickActionProps } from "../list/list-view-types";
import type { MenuItemFactoryProps } from "./helper";
import { useProjectIssueMenuItems } from "./helper";

export const ProjectIssueQuickActions = observer(
  function ProjectIssueQuickActions(props: IQuickActionProps) {
    const {
      issue,
      handleDelete,
      handleUpdate,
      handleArchive,
      customActionButton,
      portalElement,
      readOnly = false,
      placements = "bottom-end",
      parentRef,
    } = props;
    // router
    const { workspaceSlug } = useParams();
    // states
    const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
    const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(
      undefined,
    );
    const [deleteIssueModal, setDeleteIssueModal] = useState(false);
    const [archiveIssueModal, setArchiveIssueModal] = useState(false);
    const [duplicateWorkItemModal, setDuplicateWorkItemModal] = useState(false);
    // store hooks
    const { allowPermissions } = useUserPermissions();
    const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
    const { getStateById } = useProjectState();
    const { getProjectIdentifierById } = useProject();
    // derived values
    const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
    const stateDetails = getStateById(issue.state_id);
    const projectIdentifier = getProjectIdentifierById(issue?.project_id);
    // auth
    const isEditingAllowed =
      allowPermissions(
        [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
        EUserPermissionsLevel.PROJECT,
        workspaceSlug?.toString(),
        issue.project_id ?? undefined,
      ) && !readOnly;
    const isArchivingAllowed = handleArchive && isEditingAllowed;
    const isInArchivableGroup =
      !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);
    const isDeletingAllowed = isEditingAllowed;

    const duplicateIssuePayload = omit(
      {
        ...issue,
        name: `${issue.name} (copy)`,
        sourceIssueId: issue.id,
      },
      ["id"],
    );

    // Menu items and modals using helper
    const menuItemProps: MenuItemFactoryProps = {
      issue,
      workspaceSlug: workspaceSlug?.toString(),
      projectIdentifier,
      activeLayout,
      isEditingAllowed,
      isArchivingAllowed,
      isDeletingAllowed,
      isInArchivableGroup,
      setIssueToEdit,
      setCreateUpdateIssueModal,
      setDeleteIssueModal,
      setArchiveIssueModal,
      setDuplicateWorkItemModal,
      handleDelete,
      handleUpdate,
      handleArchive,
      storeType: EIssuesStoreType.PROJECT,
    };

    const MENU_ITEMS = useProjectIssueMenuItems(menuItemProps);

    const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(
      function CONTEXT_MENU_ITEMS(item) {
        return {
          ...item,

          onClick: () => {
            item.action();
          },
        };
      },
    );

    return (
      <>
        {/* Modals */}
        <ArchiveIssueModal
          data={issue}
          isOpen={archiveIssueModal}
          handleClose={() => setArchiveIssueModal(false)}
          onSubmit={handleArchive}
        />
        <DeleteIssueModal
          data={issue}
          isOpen={deleteIssueModal}
          handleClose={() => setDeleteIssueModal(false)}
          onSubmit={handleDelete}
        />
        <CreateUpdateIssueModal
          isOpen={createUpdateIssueModal}
          onClose={() => {
            setCreateUpdateIssueModal(false);
            setIssueToEdit(undefined);
          }}
          data={issueToEdit ?? duplicateIssuePayload}
          onSubmit={async (data) => {
            if (issueToEdit && handleUpdate) await handleUpdate(data);
          }}
          storeType={EIssuesStoreType.PROJECT}
        />
        {issue.project_id && workspaceSlug && (
          <DuplicateWorkItemModal
            workItemId={issue.id}
            isOpen={duplicateWorkItemModal}
            onClose={() => setDuplicateWorkItemModal(false)}
            workspaceSlug={workspaceSlug.toString()}
            projectId={issue.project_id}
          />
        )}

        <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
        <CustomMenu
          ellipsis
          placement={placements}
          customButton={customActionButton}
          portalElement={portalElement}
          menuItemsClassName="z-[14]"
          maxHeight="lg"
          closeOnSelect
        >
          {MENU_ITEMS.map((item) => {
            if (item.shouldRender === false) return null;

            // Render submenu if nestedMenuItems exist
            if (item.nestedMenuItems && item.nestedMenuItems.length > 0) {
              return (
                <CustomMenu.SubMenu
                  key={item.key}
                  trigger={
                    <div className="flex items-center gap-2">
                      {item.icon && (
                        <item.icon
                          className={cn("h-3 w-3", item.iconClassName)}
                        />
                      )}
                      <h5>{item.title}</h5>
                      {item.description && (
                        <p
                          className={cn("whitespace-pre-line text-tertiary", {
                            "text-placeholder": item.disabled,
                          })}
                        >
                          {item.description}
                        </p>
                      )}
                    </div>
                  }
                  disabled={item.disabled}
                  className={cn(
                    "flex items-center gap-2",
                    {
                      "text-placeholder": item.disabled,
                    },
                    item.className,
                  )}
                >
                  {item.nestedMenuItems.map((nestedItem) => (
                    <CustomMenu.MenuItem
                      key={nestedItem.key}
                      onClick={() => {
                        nestedItem.action();
                      }}
                      className={cn(
                        "flex items-center gap-2",
                        {
                          "text-placeholder": nestedItem.disabled,
                        },
                        nestedItem.className,
                      )}
                      disabled={nestedItem.disabled}
                    >
                      {nestedItem.icon && (
                        <nestedItem.icon
                          className={cn("h-3 w-3", nestedItem.iconClassName)}
                        />
                      )}
                      <div>
                        <h5>{nestedItem.title}</h5>
                        {nestedItem.description && (
                          <p
                            className={cn("whitespace-pre-line text-tertiary", {
                              "text-placeholder": nestedItem.disabled,
                            })}
                          >
                            {nestedItem.description}
                          </p>
                        )}
                      </div>
                    </CustomMenu.MenuItem>
                  ))}
                </CustomMenu.SubMenu>
              );
            }

            // Render regular menu item
            return (
              <CustomMenu.MenuItem
                key={item.key}
                onClick={() => {
                  item.action();
                }}
                className={cn(
                  "flex items-center gap-2",
                  {
                    "text-placeholder": item.disabled,
                  },
                  item.className,
                )}
                disabled={item.disabled}
              >
                {item.icon && (
                  <item.icon className={cn("h-3 w-3", item.iconClassName)} />
                )}
                <div>
                  <h5>{item.title}</h5>
                  {item.description && (
                    <p
                      className={cn("whitespace-pre-line text-tertiary", {
                        "text-placeholder": item.disabled,
                      })}
                    >
                      {item.description}
                    </p>
                  )}
                </div>
              </CustomMenu.MenuItem>
            );
          })}
        </CustomMenu>
      </>
    );
  },
);