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

import { observer } from "mobx-react";
// i18n
import { useTranslation } from "@pi-dash/i18n";
// ui icons
import {
  CycleIcon,
  StatePropertyIcon,
  ModuleIcon,
  MembersPropertyIcon,
  PriorityPropertyIcon,
  StartDatePropertyIcon,
  DueDatePropertyIcon,
  LabelPropertyIcon,
  UserCirclePropertyIcon,
  EstimatePropertyIcon,
  ParentPropertyIcon,
} from "@pi-dash/propel/icons";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@pi-dash/utils";
// components
import { DateDropdown } from "@/components/dropdowns/date";
import { EstimateDropdown } from "@/components/dropdowns/estimate";
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
import { PriorityDropdown } from "@/components/dropdowns/priority";
import { StateDropdown } from "@/components/dropdowns/state/dropdown";
import { SidebarPropertyListItem } from "@/components/common/layout/sidebar/property-list-item";
// helpers
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { useMember } from "@/hooks/store/use-member";
import { useProject } from "@/hooks/store/use-project";
import { useProjectState } from "@/hooks/store/use-project-state";
// pi dash web components
import { WorkItemAdditionalSidebarProperties } from "@/pi-dash-web/components/issues/issue-details/additional-properties";
import { IssueParentSelectRoot } from "@/pi-dash-web/components/issues/issue-details/parent-select-root";
import { DateAlert } from "@/pi-dash-web/components/issues/issue-details/sidebar/date-alert";
import { TransferHopInfo } from "@/pi-dash-web/components/issues/issue-details/sidebar/transfer-hop-info";
import { IssueWorklogProperty } from "@/pi-dash-web/components/issues/worklog/property";
import type { TIssueOperations } from "../issue-detail";
import { IssueCycleSelect } from "../issue-detail/cycle-select";
import { IssueLabel } from "../issue-detail/label";
import { IssueModuleSelect } from "../issue-detail/module-select";

interface IPeekOverviewProperties {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
  disabled: boolean;
  issueOperations: TIssueOperations;
}

export const PeekOverviewProperties = observer(function PeekOverviewProperties(props: IPeekOverviewProperties) {
  const { workspaceSlug, projectId, issueId, issueOperations, disabled } = props;
  const { t } = useTranslation();
  // store hooks
  const { getProjectById } = useProject();
  const {
    issue: { getIssueById },
  } = useIssueDetail();
  const { getStateById } = useProjectState();
  const { getUserDetails } = useMember();
  // derived values
  const issue = getIssueById(issueId);
  if (!issue) return <></>;
  const createdByDetails = getUserDetails(issue?.created_by);
  const projectDetails = getProjectById(issue.project_id);
  const isEstimateEnabled = projectDetails?.estimate;
  const stateDetails = getStateById(issue.state_id);

  const minDate = getDate(issue.start_date);
  minDate?.setDate(minDate.getDate());

  const maxDate = getDate(issue.target_date);
  maxDate?.setDate(maxDate.getDate());

  return (
    <div className="space-y-5">
      <div>
        <h6 className="text-body-xs-medium">{t("Properties")}</h6>
        <div className={`mt-3 w-full space-y-3 ${disabled ? "opacity-60" : ""}`}>
          <SidebarPropertyListItem icon={StatePropertyIcon} label={t("State")}>
            <StateDropdown
              value={issue?.state_id}
              onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
              projectId={projectId}
              disabled={disabled}
              buttonVariant="transparent-with-text"
              className="group w-full grow"
              buttonContainerClassName="w-full text-left h-7.5"
              buttonClassName={`text-body-xs-medium ${issue?.state_id ? "" : "text-placeholder"}`}
              dropdownArrow
              dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
            />
          </SidebarPropertyListItem>

          <SidebarPropertyListItem icon={MembersPropertyIcon} label={t("Assignees")}>
            <MemberDropdown
              value={issue?.assignee_ids ?? undefined}
              onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
              disabled={disabled}
              projectId={projectId}
              placeholder={t("Add assignees")}
              multiple
              buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
              className="group w-full grow"
              buttonContainerClassName="w-full text-left h-7.5"
              buttonClassName={`text-body-xs-medium justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
              hideIcon={issue.assignee_ids?.length === 0}
              dropdownArrow
              dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
            />
          </SidebarPropertyListItem>

          <SidebarPropertyListItem icon={PriorityPropertyIcon} label={t("Priority")}>
            <PriorityDropdown
              value={issue?.priority}
              onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
              disabled={disabled}
              buttonVariant="transparent-with-text"
              className="h-7.5 w-full grow rounded-sm"
              buttonContainerClassName="w-full text-left h-7.5"
              buttonClassName={`text-body-xs-medium whitespace-nowrap [&_svg]:size-3.5 ${!issue?.priority || issue?.priority === "none" ? "text-placeholder" : ""}`}
            />
          </SidebarPropertyListItem>

          {createdByDetails && (
            <SidebarPropertyListItem
              icon={UserCirclePropertyIcon}
              label={t("Created by")}
              childrenClassName="px-2"
            >
              <ButtonAvatars
                showTooltip
                userIds={createdByDetails?.display_name.includes("-intake") ? null : createdByDetails?.id}
              />
              <span className="grow truncate text-body-xs-medium leading-5 text-secondary">
                {createdByDetails?.display_name.includes("-intake") ? "Pi Dash" : createdByDetails?.display_name}
              </span>
            </SidebarPropertyListItem>
          )}

          <SidebarPropertyListItem icon={StartDatePropertyIcon} label={t("Start date")}>
            <DateDropdown
              value={issue.start_date}
              onChange={(val) =>
                issueOperations.update(workspaceSlug, projectId, issueId, {
                  start_date: val ? renderFormattedPayloadDate(val) : null,
                })
              }
              placeholder={t("Add start date")}
              buttonVariant="transparent-with-text"
              maxDate={maxDate ?? undefined}
              disabled={disabled}
              className="group w-full grow"
              buttonContainerClassName="w-full text-left h-7.5"
              buttonClassName={`text-body-xs-medium ${issue?.start_date ? "" : "text-placeholder"}`}
              hideIcon
              clearIconClassName="h-3 w-3 hidden group-hover:inline"
            />
          </SidebarPropertyListItem>

          <SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("Due date")}>
            <div className="flex w-full items-center gap-2">
              <DateDropdown
                value={issue.target_date}
                onChange={(val) =>
                  issueOperations.update(workspaceSlug, projectId, issueId, {
                    target_date: val ? renderFormattedPayloadDate(val) : null,
                  })
                }
                placeholder={t("Add due date")}
                buttonVariant="transparent-with-text"
                minDate={minDate ?? undefined}
                disabled={disabled}
                className="group w-full grow"
                buttonContainerClassName="w-full text-left h-7.5"
                buttonClassName={cn("text-body-xs-medium", {
                  "text-placeholder": !issue.target_date,
                  "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
                })}
                hideIcon
                clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
              />
              {issue.target_date && <DateAlert date={issue.target_date} workItem={issue} projectId={projectId} />}
            </div>
          </SidebarPropertyListItem>

          {isEstimateEnabled && (
            <SidebarPropertyListItem icon={EstimatePropertyIcon} label={t("Estimate")}>
              <EstimateDropdown
                value={issue.estimate_point ?? undefined}
                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
                projectId={projectId}
                disabled={disabled}
                buttonVariant="transparent-with-text"
                className="group w-full grow"
                buttonContainerClassName="w-full text-left h-7.5"
                buttonClassName={`text-body-xs-medium ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
                placeholder="None"
                hideIcon
                dropdownArrow
                dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
              />
            </SidebarPropertyListItem>
          )}

          {projectDetails?.module_view && (
            <SidebarPropertyListItem icon={ModuleIcon} label={t("Modules")}>
              <IssueModuleSelect
                className="w-full grow"
                workspaceSlug={workspaceSlug}
                projectId={projectId}
                issueId={issueId}
                issueOperations={issueOperations}
                disabled={disabled}
              />
            </SidebarPropertyListItem>
          )}

          {projectDetails?.cycle_view && (
            <SidebarPropertyListItem
              icon={CycleIcon}
              label={t("Cycle")}
              appendElement={<TransferHopInfo workItem={issue} />}
            >
              <IssueCycleSelect
                className="h-7.5 w-full grow"
                workspaceSlug={workspaceSlug}
                projectId={projectId}
                issueId={issueId}
                issueOperations={issueOperations}
                disabled={disabled}
              />
            </SidebarPropertyListItem>
          )}

          <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("Parent")}>
            <IssueParentSelectRoot
              className="h-7.5 w-full grow"
              disabled={disabled}
              issueId={issueId}
              issueOperations={issueOperations}
              projectId={projectId}
              workspaceSlug={workspaceSlug}
            />
          </SidebarPropertyListItem>

          <SidebarPropertyListItem icon={LabelPropertyIcon} label={t("Labels")}>
            <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
          </SidebarPropertyListItem>

          <IssueWorklogProperty
            workspaceSlug={workspaceSlug}
            projectId={projectId}
            issueId={issueId}
            disabled={disabled}
          />

          <WorkItemAdditionalSidebarProperties
            workItemId={issue.id}
            workItemTypeId={issue.type_id}
            projectId={projectId}
            workspaceSlug={workspaceSlug}
            isEditable={!disabled}
            isPeekView
          />
        </div>
      </div>
    </div>
  );
});
