import React from "react";

// ui
import { Listbox, Transition } from "@headlessui/react";
// icons
import { getPriorityIcon } from "components/icons/priority-icon";
// types
import { IIssue } from "types";
// constants
import { PRIORITIES } from "constants/project";

type Props = {
  issue: IIssue;
  partialUpdateIssue: (formData: Partial<IIssue>) => void;
  position?: "left" | "right";
  isNotAllowed: boolean;
};

export const ViewPrioritySelect: React.FC<Props> = ({
  issue,
  partialUpdateIssue,
  position = "right",
  isNotAllowed,
}) => (
  <Listbox
    as="div"
    value={issue.priority}
    onChange={(data: string) => {
      partialUpdateIssue({ priority: data });
    }}
    className="group relative flex-shrink-0"
    disabled={isNotAllowed}
  >
    {({ open }) => (
      <div>
        <Listbox.Button
          className={`flex ${
            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
          } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
            issue.priority === "urgent"
              ? "bg-red-100 text-red-600"
              : issue.priority === "high"
              ? "bg-orange-100 text-orange-500"
              : issue.priority === "medium"
              ? "bg-yellow-100 text-yellow-500"
              : issue.priority === "low"
              ? "bg-green-100 text-green-500"
              : "bg-gray-100"
          }`}
        >
          {getPriorityIcon(
            issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
            "text-sm"
          )}
        </Listbox.Button>

        <Transition
          show={open}
          as={React.Fragment}
          leave="transition ease-in duration-100"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <Listbox.Options
            className={`absolute z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
              position === "left" ? "left-0" : "right-0"
            }`}
          >
            {PRIORITIES?.map((priority) => (
              <Listbox.Option
                key={priority}
                className={({ active }) =>
                  `flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize ${
                    active ? "bg-indigo-50" : "bg-white"
                  }`
                }
                value={priority}
              >
                {getPriorityIcon(priority, "text-sm")}
                {priority ?? "None"}
              </Listbox.Option>
            ))}
          </Listbox.Options>
        </Transition>
      </div>
    )}
  </Listbox>
);