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

import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import type { TExternalContourBoardDirection, TInboxIssueCurrentTab } from "@plane/types";
import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
import { ExternalContoursBoardItem } from "./board-item";
import { ExternalContoursEmptyState } from "./empty-state";

type Props = {
  currentTab: TInboxIssueCurrentTab;
  direction: TExternalContourBoardDirection;
  projectId: string;
  workspaceSlug: string;
};

export const ExternalContoursBoardColumn = observer(function ExternalContoursBoardColumn(props: Props) {
  const { currentTab, direction, projectId, workspaceSlug } = props;
  const { t } = useTranslation();
  const { getColumnRequestIds, getColumnTotalCount, getRequestById } = useProjectExternalContoursBoard();
  const requestIds = getColumnRequestIds(direction);
  const totalCount = getColumnTotalCount(direction);

  const title =
    direction === "outgoing"
      ? t("external_contours_page.board.columns.outgoing")
      : t("external_contours_page.board.columns.incoming");

  const emptyTitle =
    direction === "outgoing"
      ? t("external_contours_page.board.empty.outgoing_title")
      : t("external_contours_page.board.empty.incoming_title");

  const emptyDescription =
    direction === "outgoing"
      ? t("external_contours_page.board.empty.outgoing_description")
      : t("external_contours_page.board.empty.incoming_description");

  return (
    <section className="flex h-full min-h-0 w-[350px] flex-shrink-0 flex-col">
      <div className="flex items-center justify-between gap-3 py-1.5">
        <div className="text-15 font-semibold text-primary">{title}</div>
        <div className="rounded-full bg-white/5 px-2 py-1 text-12 font-semibold text-secondary">{totalCount}</div>
      </div>

      <div className="vertical-scrollbar scrollbar-md -mr-2 h-full min-h-[120px] flex-1 overflow-y-auto pr-2 pt-3">
        {requestIds.length > 0 ? (
          <>
            {requestIds.map((requestId) => {
              const request = getRequestById(requestId);
              if (!request) return null;

              return (
                <ExternalContoursBoardItem
                  key={requestId}
                  currentTab={currentTab}
                  direction={direction}
                  projectId={projectId}
                  request={request}
                  workspaceSlug={workspaceSlug}
                />
              );
            })}
          </>
        ) : (
          <div className="flex h-full min-h-[18rem] items-center justify-center">
            <ExternalContoursEmptyState title={emptyTitle} description={emptyDescription} />
          </div>
        )}
      </div>
    </section>
  );
});