/**
 * 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 { SignalHigh } from "lucide-react";
import { ISSUE_PRIORITIES } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon, PriorityIcon, PriorityPropertyIcon } from "@plane/propel/icons";
import type { TIssue } from "@plane/types";
import { PriorityDropdown } from "@/components/dropdowns/priority";
import { IssueLabelSelect } from "@/components/issues/select";
import type { TIssueOperations } from "@/components/issues/issue-detail";

type Props = {
  workspaceSlug: string;
  targetProjectId: string;
  issue: Partial<TIssue> & {
    project_detail?: { name?: string } | null;
  };
  issueOperations: TIssueOperations;
  isEditable: boolean;
};

export const ExternalContoursIssueContentProperties = observer(function ExternalContoursIssueContentProperties(props: Props) {
  const { workspaceSlug, targetProjectId, issue, issueOperations, isEditable } = props;
  const { t } = useTranslation();
  const selectedLabels = issue.label_details ?? [];
  const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === issue?.priority);

  if (!issue || !issue?.id) return <></>;

  return (
    <div className="flex w-full flex-col">
      <div className="w-full overflow-visible">
        <h5 className="mb-2 text-body-sm-medium">{t("external_contours_page.properties.section_title")}</h5>
        <div className={`${!isEditable ? "opacity-60" : ""}`}>
          <div className="grid grid-cols-2 gap-3">
            <div className="nodedc-external-property-row">
              <div className="nodedc-external-property-label">
                <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
                <span>{t("priority")}</span>
              </div>
              <PriorityDropdown
                value={issue?.priority}
                onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
                disabled={!isEditable}
                placement="top-start"
                buttonVariant="transparent-without-text"
                className="flex-1 overflow-visible"
                buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
                button={
                  <div className="nodedc-external-property-control text-[13px] font-medium">
                    {issue.priority && issue.priority !== "none" ? (
                      <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5 flex-shrink-0" />
                    ) : (
                      <SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
                    )}
                    <span className={issue.priority && issue.priority !== "none" ? "text-primary" : "text-tertiary"}>
                      {issue.priority && issue.priority !== "none"
                        ? priorityDetails?.title
                        : t("external_contours_page.form.priority")}
                    </span>
                  </div>
                }
              />
            </div>

            <div className="nodedc-external-property-row">
              <div className="nodedc-external-property-label">
                <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                <span>{t("labels")}</span>
              </div>
              <div className="h-full min-h-8 flex-1 overflow-visible">
                <IssueLabelSelect
                  value={issue.label_ids || []}
                  onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
                  projectId={targetProjectId}
                  disabled={!isEditable}
                  placement="top-start"
                  rootClassName="w-full overflow-visible"
                  buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
                  label={
                    <div className="nodedc-external-property-control text-[13px] font-medium">
                      <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
                      <span className={selectedLabels.length > 0 ? "truncate text-primary" : "truncate text-tertiary"}>
                        {selectedLabels.length > 0
                          ? selectedLabels.length === 1
                            ? selectedLabels[0]?.name
                            : `${selectedLabels.length} ${t("labels").toLocaleLowerCase()}`
                          : t("labels")}
                      </span>
                    </div>
                  }
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});