import React from "react";
import { observer } from "mobx-react-lite";
import { Triangle } from "lucide-react";
import sortBy from "lodash/sortBy";
// store hooks
import { useEstimate } from "hooks/store";
// ui
import { CustomSelect, Tooltip } from "@plane/ui";
// types
import { TIssue } from "@plane/types";

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

export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
  const { issue, onChange, tooltipPosition = "top", customButton = false, disabled } = props;
  const { areEstimatesEnabledForCurrentProject, activeEstimateDetails, getEstimatePointValue } = useEstimate();

  const estimateValue = getEstimatePointValue(issue.estimate_point);

  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 (!areEstimatesEnabledForCurrentProject) 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>
      {sortBy(activeEstimateDetails?.points, "key")?.map((estimate) => (
        <CustomSelect.Option key={estimate.id} value={estimate.key}>
          <>
            <Triangle className="h-3 w-3" />
            {estimate.value}
          </>
        </CustomSelect.Option>
      ))}
    </CustomSelect>
  );
});