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

import { useMemo } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import { Badge } from "@plane/propel/badge";
import type { TIssue, TIssuePriorities } from "@plane/types";
import { renderFormattedPayloadDate } from "@plane/utils";
import { DateDropdown } from "@/components/dropdowns/date";
import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
import { PriorityDropdown } from "@/components/dropdowns/priority";
import { ProjectDropdown } from "@/components/dropdowns/project/dropdown";
import { IssueLabelSelect } from "@/components/issues/select";
import { useProject } from "@/hooks/store/use-project";

type Props = {
  currentProjectId: string;
  currentProjectName?: string;
  data: Partial<TIssue> & { target_project_id?: string | null; priority?: TIssuePriorities };
  handleData: (issueKey: keyof Props["data"], issueValue: Props["data"][keyof Props["data"]]) => void;
};

export const ExternalContoursCreateProperties = observer(function ExternalContoursCreateProperties(props: Props) {
  const { currentProjectId, currentProjectName, data, handleData } = props;
  const { t } = useTranslation();
  const { getProjectById } = useProject();

  const selectedTargetProject = useMemo(
    () => (data.target_project_id ? getProjectById(data.target_project_id) : undefined),
    [data.target_project_id, getProjectById]
  );

  return (
    <div className="relative flex flex-wrap items-center gap-2">
      <div className="rounded-md border border-subtle bg-surface-2 px-3 py-1.5 text-11 text-secondary">
        <span className="mr-2 text-tertiary">{t("external_contours_page.form.source_project")}</span>
        <Badge variant="neutral">{currentProjectName || "NODE.DC"}</Badge>
      </div>

      <div className="h-7">
        <ProjectDropdown
          value={data.target_project_id ?? null}
          onChange={(value) => {
            if (!Array.isArray(value)) {
              handleData("target_project_id", value);
              handleData("assignee_ids", []);
              handleData("label_ids", []);
            }
          }}
          multiple={false}
          buttonVariant="border-with-text"
          placeholder={t("external_contours_page.form.target_project")}
          renderCondition={(projectId) => projectId !== currentProjectId}
        />
      </div>

      {selectedTargetProject && (
        <div className="rounded-md border border-subtle bg-surface-2 px-3 py-1.5 text-11 text-secondary">
          <span className="mr-2 text-tertiary">{t("external_contours_page.form.selected_target")}</span>
          <Badge variant="neutral">{selectedTargetProject.name}</Badge>
        </div>
      )}

      <div className="h-7">
        <PriorityDropdown
          value={data.priority}
          onChange={(priority) => handleData("priority", priority)}
          buttonVariant="border-with-text"
        />
      </div>

      <div className="h-7">
        <MemberDropdown
          projectId={data.target_project_id ?? undefined}
          value={data.assignee_ids || []}
          onChange={(assigneeIds) => handleData("assignee_ids", assigneeIds)}
          buttonVariant={(data.assignee_ids || []).length > 0 ? "transparent-without-text" : "border-with-text"}
          buttonClassName={(data.assignee_ids || []).length > 0 ? "hover:bg-transparent" : ""}
          placeholder={t("external_contours_page.form.assignee")}
          disabled={!data.target_project_id}
          multiple
        />
      </div>

      <div className="h-7">
        <IssueLabelSelect
          value={data.label_ids || []}
          onChange={(labelIds) => handleData("label_ids", labelIds)}
          projectId={data.target_project_id ?? undefined}
          disabled={!data.target_project_id}
        />
      </div>

      <div className="h-7">
        <DateDropdown
          value={data.target_date || null}
          onChange={(date) => handleData("target_date", date ? renderFormattedPayloadDate(date) : "")}
          buttonVariant="border-with-text"
          placeholder={t("external_contours_page.form.due_date")}
        />
      </div>
    </div>
  );
});