import { Fragment, useState, useRef } from 'react';
import { Listbox, Transition } from '@headlessui/react';
import { Field } from 'formik';


const tags = [
  { name: '#' },
  { name: '#job' },
  { name: '#outsourcing' },
  { name: '#project' },
  { name: '#partnership' },

];

export default function TagInputDropdown() {
  const [selected, setSelected] = useState(tags[0]);

  const ref = useRef();

  return (
    <div className="w-36">
      <Listbox value={selected} onChange={setSelected}>
        <div className="relative">
          <Listbox.Button className="relative w-full py-2 pl-4 pr-10 text-left bg-white border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
            <Field name="tag" className="block truncate" ref></Field>
            <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <div
                className="w-5 h-5 text-gray-400"
                aria-hidden="true"
              />
            </span>
          </Listbox.Button>
          <Transition
            as={Fragment}
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Listbox.Options className="absolute w-full py-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
              {tags.map((tag, tagIdx) => (
                <Listbox.Option
                  key={tagIdx}
                  className={({ active }) =>
                    `${active ? 'text-amber-900 bg-amber-100' : 'text-gray-900'}
                          cursor-default relative py-2 pl-4 pr-4`
                  }
                  value={tag}
                >
                  {({ selected, active }) => (
                    <>
                      <span
                        className={`${
                          selected ? 'font-medium' : 'font-normal'
                        } block truncate`}
                      >
                        {tag.name}
                      </span>
                      {selected ? (
                        <span
                          className={`${
                            active ? 'text-amber-600' : 'text-amber-600'
                          }
                                absolute inset-y-0 left-0 flex items-center pl-3`}
                        >
                          <div className="w-5 h-5" aria-hidden="true" />
                        </span>
                      ) : null}
                    </>
                  )}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </Transition>
        </div>
      </Listbox>
    </div>
  );
}
