import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useState } from "react";
// buzzwareTech imports
import { EUserPermissionsLevel } from "@buzzwaretech/constants";
import { useTranslation } from "@buzzwaretech/i18n";
import { EmptyStateDetailed } from "@buzzwaretech/propel/empty-state";
import { TOAST_TYPE, setToast } from "@buzzwaretech/propel/toast";
import type { ISearchIssueResponse } from "@buzzwaretech/types";
import { EIssuesStoreType, EUserProjectRoles } from "@buzzwaretech/types";
// components
import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
// hooks
import { useCommandPalette } from "@/hooks/store/use-command-palette";
import { useIssues } from "@/hooks/store/use-issues";
import { useUserPermissions } from "@/hooks/store/user";
import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";

export const ModuleEmptyState = observer(function ModuleEmptyState() {
  // router
  const {
    workspaceSlug: routerWorkspaceSlug,
    projectId: routerProjectId,
    moduleId: routerModuleId,
  } = useParams();
  const workspaceSlug = routerWorkspaceSlug
    ? routerWorkspaceSlug.toString()
    : undefined;
  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
  const moduleId = routerModuleId ? routerModuleId.toString() : undefined;
  // states
  const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
  // buzzwareTech hooks
  const { t } = useTranslation();
  // store hooks
  const { issues } = useIssues(EIssuesStoreType.MODULE);
  const { toggleCreateIssueModal } = useCommandPalette();
  const { allowPermissions } = useUserPermissions();
  // derived values
  const moduleWorkItemFilter = useWorkItemFilterInstance(
    EIssuesStoreType.MODULE,
    moduleId,
  );
  const canPerformEmptyStateActions = allowPermissions(
    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
    EUserPermissionsLevel.PROJECT,
  );

  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
    if (!workspaceSlug || !projectId || !moduleId) return;

    const issueIds = data.map((i) => i.id);
    await issues
      .addIssuesToModule(
        workspaceSlug.toString(),
        projectId?.toString(),
        moduleId.toString(),
        issueIds,
      )
      .then(() =>
        setToast({
          type: TOAST_TYPE.SUCCESS,
          title: "Success!",
          message: "Work items added to the module successfully.",
        }),
      )
      .catch(() =>
        setToast({
          type: TOAST_TYPE.ERROR,
          title: "Error!",
          message:
            "Selected work items could not be added to the module. Please try again.",
        }),
      );
  };

  return (
    <div className="relative h-full w-full overflow-y-auto">
      <ExistingIssuesListModal
        workspaceSlug={workspaceSlug?.toString()}
        projectId={projectId?.toString()}
        isOpen={moduleIssuesListModal}
        handleClose={() => setModuleIssuesListModal(false)}
        searchParams={{
          module: moduleId != undefined ? moduleId.toString() : "",
        }}
        handleOnSubmit={handleAddIssuesToModule}
      />
      <div className="grid h-full w-full place-items-center">
        {moduleWorkItemFilter?.hasActiveFilters ? (
          <EmptyStateDetailed
            assetKey="search"
            title={t("common_empty_state.search.title")}
            description={t("common_empty_state.search.description")}
            actions={[
              {
                label: "Clear filters",
                onClick: moduleWorkItemFilter?.clearFilters,
                disabled: !canPerformEmptyStateActions || !moduleWorkItemFilter,
                variant: "secondary",
              },
            ]}
          />
        ) : (
          <EmptyStateDetailed
            assetKey="work-item"
            title={t("project_empty_state.module_work_items.title")}
            description={t("project_empty_state.module_work_items.description")}
            actions={[
              {
                label: t("project_empty_state.module_work_items.cta_primary"),
                onClick: () => {
                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                },
                disabled: !canPerformEmptyStateActions,
                variant: "primary",
              },
              {
                label: t("project_empty_state.module_work_items.cta_secondary"),
                onClick: () => setModuleIssuesListModal(true),
                disabled: !canPerformEmptyStateActions,
                variant: "secondary",
              },
            ]}
          />
        )}
      </div>
    </div>
  );
});