/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { useEffect } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import { EmptyStateDetailed } from "@plane/propel/empty-state";
import type { TInboxIssueCurrentTab } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { EHeaderVariant, Header } from "@plane/ui";
import { cn } from "@plane/utils";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { useAppRouter } from "@/hooks/use-app-router";
import { ExternalContoursListItem } from "./list-item";

type Props = {
  workspaceSlug: string;
  projectId: string;
  inboxIssueId: string | undefined;
  setIsMobileSidebar: (value: boolean) => void;
};

const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[] = [
  { key: EInboxIssueCurrentTab.OPEN, i18n_label: "external_contours_page.tabs.open" },
  { key: EInboxIssueCurrentTab.CLOSED, i18n_label: "external_contours_page.tabs.closed" },
];

export const ExternalContoursSidebar = observer(function ExternalContoursSidebar(props: Props) {
  const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
  const router = useAppRouter();
  const { t } = useTranslation();
  const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds } = useProjectExternalContours();

  useEffect(() => {
    if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
      router.push(
        `/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${filteredRequestIds[0]}`
      );
    }
  }, [currentTab, filteredRequestIds, inboxIssueId, projectId, router, workspaceSlug]);

  const currentCount = currentTab === EInboxIssueCurrentTab.CLOSED ? closedRequestIds.length : openRequestIds.length;

  return (
    <div className="h-full w-full flex-shrink-0 border-r border-strong bg-surface-1">
      <div className="relative flex h-full w-full flex-col overflow-hidden">
        <Header variant={EHeaderVariant.SECONDARY}>
          {tabNavigationOptions.map((option) => (
            <div
              key={option.key}
              className={cn(
                "relative flex h-full cursor-pointer items-center gap-1 px-3 text-13 font-medium transition-all",
                currentTab === option.key ? "text-accent-primary" : "hover:text-secondary"
              )}
              onClick={() => {
                if (currentTab !== option.key) {
                  handleCurrentTab(workspaceSlug, projectId, option.key);
                  router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
                }
              }}
            >
              <div>{t(option.i18n_label)}</div>
              {currentTab === option.key && (
                <div className="rounded-full bg-accent-primary/20 px-1.5 py-0.5 text-11 font-semibold text-accent-primary">
                  {currentCount}
                </div>
              )}
              <div
                className={cn(
                  "absolute right-0 bottom-0 left-0 rounded-t-md border",
                  currentTab === option.key ? "border-accent-strong" : "border-transparent"
                )}
              />
            </div>
          ))}
        </Header>

        <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
          {filteredRequestIds.length > 0 ? (
            filteredRequestIds.map((requestId) => (
              <ExternalContoursListItem
                key={requestId}
                setIsMobileSidebar={setIsMobileSidebar}
                workspaceSlug={workspaceSlug}
                projectId={projectId}
                requestId={requestId}
              />
            ))
          ) : (
            <div className="flex h-full w-full items-center justify-center">
              {currentTab === EInboxIssueCurrentTab.OPEN ? (
                <EmptyStateDetailed
                  assetKey="inbox"
                  title={t("external_contours_page.empty_state.open_title")}
                  description={t("external_contours_page.empty_state.open_description")}
                  assetClassName="size-20"
                  rootClassName="px-page-x"
                />
              ) : (
                <EmptyStateDetailed
                  assetKey="inbox"
                  title={t("external_contours_page.empty_state.closed_title")}
                  description={t("external_contours_page.empty_state.closed_description")}
                  assetClassName="size-20"
                  className="px-10"
                />
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
});