import { observer } from "mobx-react";
// buzzwareTech imports
import { useTranslation } from "@buzzwaretech/i18n";
import {
    CycleIcon,
    IntakeIcon,
    ModuleIcon,
    PageIcon,
    ViewsIcon,
} from "@buzzwaretech/propel/icons";
import { setPromiseToast } from "@buzzwaretech/propel/toast";
import { Tooltip } from "@buzzwaretech/propel/tooltip";
import type { IProject } from "@buzzwaretech/types";
// components
import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
import { SettingsHeading } from "@/components/settings/heading";
// hooks
import { useProject } from "@/hooks/store/use-project";
// buzzwareTech web imports
import { UpgradeBadge } from "@/buzzwareTech-web/components/workspace/upgrade-badge";
// local imports
import { ProjectFeatureToggle } from "./helper";

type Props = {
  workspaceSlug: string;
  projectId: string;
  isAdmin: boolean;
};

const PROJECT_FEATURES_LIST = {
  cycles: {
    key: "cycles",
    property: "cycle_view",
    title: "Cycles",
    description:
      "Timebox work as you see fit per project and change frequency from one period to the next.",
    icon: (
      <CycleIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-tertiary" />
    ),
    isPro: false,
    isEnabled: true,
  },
  modules: {
    key: "modules",
    property: "module_view",
    title: "Modules",
    description:
      "Group work into sub-project-like set-ups with their own leads and assignees.",
    icon: (
      <ModuleIcon
        width={20}
        height={20}
        className="flex-shrink-0 text-tertiary"
      />
    ),
    isPro: false,
    isEnabled: true,
  },
  views: {
    key: "views",
    property: "issue_views_view",
    title: "Views",
    description:
      "Save sorts, filters, and display options for later or share them.",
    icon: <ViewsIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
    isPro: false,
    isEnabled: true,
  },
  pages: {
    key: "pages",
    property: "page_view",
    title: "Pages",
    description: "Write anything like you write anything.",
    icon: <PageIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
    isPro: false,
    isEnabled: true,
  },
  inbox: {
    key: "intake",
    property: "inbox_view",
    title: "Intake",
    description:
      "Consider and discuss work items before you add them to your project.",
    icon: <IntakeIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
    isPro: false,
    isEnabled: true,
  },
};

export const ProjectFeaturesList = observer(function ProjectFeaturesList(
  props: Props,
) {
  const { workspaceSlug, projectId, isAdmin } = props;
  // store hooks
  const { t } = useTranslation();
  const { getProjectById, updateProject } = useProject();
  // derived values
  const currentProjectDetails = getProjectById(projectId);

  const handleSubmit = (_featureKey: string, featureProperty: string) => {
    if (!workspaceSlug || !projectId || !currentProjectDetails) return;

    // making the request to update the project feature
    const settingsPayload = {
      [featureProperty]:
        !currentProjectDetails?.[featureProperty as keyof IProject],
    };
    const updateProjectPromise = updateProject(
      workspaceSlug,
      projectId,
      settingsPayload,
    );

    setPromiseToast(updateProjectPromise, {
      loading: "Updating project feature...",
      success: {
        title: "Success!",
        message: () => "Project feature updated successfully.",
      },
      error: {
        title: "Error!",
        message: () =>
          "Something went wrong while updating project feature. Please try again.",
      },
    });
    void updateProjectPromise.then(() => {
      return undefined;
    });
  };

  return (
    <>
      <div>
        <SettingsHeading
          title={t("projects_and_issues")}
          description={t("projects_and_issues_description")}
        />
        <div className="mt-6 flex flex-col gap-y-4">
          {Object.entries(PROJECT_FEATURES_LIST).map(
            ([featureItemKey, featureItem]) => (
              <div key={featureItemKey}>
                <SettingsBoxedControlItem
                  title={
                    <span className="flex items-center gap-2">
                      {t(featureItem.key)}
                      {featureItem.isPro && (
                        <Tooltip tooltipContent="Pro feature" position="top">
                          <UpgradeBadge className="rounded-sm" />
                        </Tooltip>
                      )}
                    </span>
                  }
                  description={t(`${featureItem.key}_description`)}
                  control={
                    <ProjectFeatureToggle
                      workspaceSlug={workspaceSlug}
                      projectId={projectId}
                      featureItem={featureItem}
                      value={Boolean(
                        currentProjectDetails?.[
                          featureItem.property as keyof IProject
                        ],
                      )}
                      handleSubmit={handleSubmit}
                      disabled={!isAdmin}
                    />
                  }
                />
                {/* {currentProjectDetails?.[featureItem.property as keyof IProject] && (
                <div className="pl-14">{featureItem.renderChildren?.(currentProjectDetails, workspaceSlug)}</div>
              )} */}
              </div>
            ),
          )}
        </div>
      </div>
    </>
  );
});