import React from "react";
// hooks
import useEstimateOption from "hooks/use-estimate-option";
// ui
import { CustomSelect, Tooltip } from "@plane/ui";
// icons
import { Triangle } from "lucide-react";
// types
import { IIssue } from "types";

type Props = {
  issue: IIssue;
  onChange: (data: number) => void;
  tooltipPosition?: "top" | "bottom";
  customButton?: boolean;
  disabled: boolean;
};

export const ViewEstimateSelect: React.FC<Props> = ({
  issue,
  onChange,
  tooltipPosition = "top",
  customButton = false,
  disabled,
}) => {
  const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);

  const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;

  const estimateLabels = (
    <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
      <div className="flex items-center gap-1 text-custom-text-200">
        <Triangle className="h-3 w-3" />
        {estimateValue ?? "None"}
      </div>
    </Tooltip>
  );

  if (!isEstimateActive) return null;

  return (
    <CustomSelect
      value={issue.estimate_point}
      onChange={onChange}
      {...(customButton ? { customButton: estimateLabels } : { label: estimateLabels })}
      maxHeight="md"
      noChevron
      disabled={disabled}
      width="w-full min-w-[8rem]"
    >
      <CustomSelect.Option value={null}>
        <>
          <span>
            <Triangle className="h-3 w-3" />
          </span>
          None
        </>
      </CustomSelect.Option>
      {estimatePoints?.map((estimate) => (
        <CustomSelect.Option key={estimate.id} value={estimate.key}>
          <>
            <Triangle className="h-3 w-3" />
            {estimate.value}
          </>
        </CustomSelect.Option>
      ))}
    </CustomSelect>
  );
};