/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import React from "react";
import { Fragment } from "react";
import { Listbox, Transition } from "@headlessui/react";
import classNames from "classnames";
import "../index.css";
import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg";

/* -------------------------------------------------------------------------- */
/*                               Component props                              */
/* -------------------------------------------------------------------------- */

type Props<T> = {
  options?: T[];
  disabled?: boolean;
  className?: string;
  value: T;
  displayValueResolver?: (element: T) => any;
  onChange: (element: T) => void;
} & Omit<React.ComponentPropsWithRef<"select">, "value" | "onChange">;

/* -------------------------------------------------------------------------- */
/*                                 styles                                     */
/* -------------------------------------------------------------------------- */

const SelectButtonStyle = `
    relative w-full
    cursor-default    
    rounded
    border border-gray-50 
    outline-8
    bg-white
    py-2 pl-3 pr-10 text-left
    hover:border-gray-300
    focus:outline-1
    focus-visible:border-gray-500
    sm:text-sm
    `;

const SelectOptionsStyle = `
    absolute z-10 mt-1 w-full max-h-56
    bg-white shadow-lg
    rounded py-1
    overflow-auto
    focus:outline-none
    text-base 
    sm:text-sm
    `;

const SelectIconStyle = `
    pointer-events-none
    absolute inset-y-0 right-0
    flex items-center pr-2
    `;
/* -------------------------------------------------------------------------- */
/*                          Component implementation                          */
/* -------------------------------------------------------------------------- */
function Select<T>({
  className,
  options = [],
  value,
  onChange,
  displayValueResolver,
  disabled,
  ...props
}: Props<T>): JSX.Element {
  return (
    <div className={classNames("fixed top-16 w-60", className)}>
      <Listbox value={value} {...props} onChange={onChange}>
        <div className="relative mt-1">
          <Listbox.Button className={`${SelectButtonStyle}`}>
            {({ open }) => (
              <>
                <span className="block truncate">{`${
                  displayValueResolver ? displayValueResolver(value) : value
                }`}</span>
                <span className={`${SelectIconStyle}`}>
                  <SelectIcon
                    className={`${
                      open ? "rotate-180 transform" : "font-normal"
                    } h-2 w-3`}
                  />
                </span>
              </>
            )}
          </Listbox.Button>

          <Transition
            as={Fragment}
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Listbox.Options className={`${SelectOptionsStyle}`}>
              {options.map((option, id) => (
                <Listbox.Option
                  key={id}
                  className={({ active, selected }) =>
                    classNames(
                      active ? "text-gray-900 bg-blue-50" : "font-normal ",
                      "cursor-default select-none relative py-2 pl-3 pr-9",
                      selected ? "text-gray-900 bg-blue-100" : "font-normal "
                    )
                  }
                  value={option}
                >
                  {`${
                    displayValueResolver ? displayValueResolver(option) : option
                  }`}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </Transition>
        </div>
      </Listbox>
    </div>
  );
}
export default Select;