import { Listbox, Transition } from '@headlessui/react';
import { ALargeSmallIcon, ChevronsUpDown } from 'lucide-react';
import { Fragment } from 'react';

const FONT_SIZES = {
  default: 'Default',
  '10px': '10px',
  '12px': '12px',
  '14px': '14px',
  '16px': '16px',
  '18px': '18px',
  '20px': '20px',
  '24px': '24px',
  '28px': '28px',
  '32px': '32px',
  '36px': '36px',
  '40px': '40px',
  '44px': '44px',
  '48px': '48px',
};

const FontSize = ({ editor, fontSize }) => {
  const handleChange = (value) => {
    if (value === 'default') {
      editor.chain().focus().unsetFontSize().run();
    } else {
      editor.chain().focus().setFontSize(value).run();
    }
  };

  return (
    <Listbox value={fontSize || 'default'} onChange={handleChange}>
      <div className='wmx-relative wmx-mt-1'>
        <Listbox.Button className='wmx-relative wmx-w-full wmx-cursor-default wmx-rounded-md wmx-border wmx-border-gray-200 wmx-bg-white wmx-py-[3px] wmx-pl-1.5 wmx-pr-7 wmx-text-left focus:wmx-outline-none focus-visible:wmx-border-indigo-500 focus-visible:wmx-ring-2 focus-visible:wmx-ring-white/75 focus-visible:wmx-ring-offset-2 focus-visible:wmx-ring-offset-orange-300 sm:wmx-text-sm'>
          <span className='wmx-flex wmx-items-center wmx-gap-1.5'>
            <ALargeSmallIcon className='wmx-size-5 wmx-text-gray-500' />
            <span className='wmx-block wmx-w-px wmx-h-4 wmx-bg-gray-400' />
            <span className='wmx-block wmx-truncate'>{FONT_SIZES[fontSize || 'default']}</span>
          </span>
          <span className='wmx-pointer-events-none wmx-absolute wmx-inset-y-0 wmx-right-0 wmx-flex wmx-items-center wmx-pr-0.5'>
            <ChevronsUpDown className='wmx-size-[18px] wmx-text-gray-500' aria-hidden='true' />
          </span>
        </Listbox.Button>

        <Transition
          as={Fragment}
          leave='wmx-transition wmx-ease-in wmx-duration-100'
          leaveFrom='wmx-opacity-100'
          leaveTo='wmx-opacity-0'
        >
          <Listbox.Options className='wmx-z-40 wmx-rounded-md wmx-border wmx-border-gray-200 wmx-absolute wmx-mt-1 wmx-max-h-40 wmx-w-full wmx-overflow-auto wmx-bg-white  wmx-text-base wmx-shadow-lg focus:wmx-outline-none sm:wmx-text-sm'>
            {Object.keys(FONT_SIZES).map((key) => (
              <Listbox.Option
                key={key}
                className={({ active }) =>
                  `wmx-relative wmx-m-0 wmx-cursor-default wmx-select-none wmx-py-1  wmx-px-2 ${
                    active ? 'wmx-bg-blue-100 wmx-font-bold' : 'wmx-text-gray-900'
                  }`
                }
                value={key}
              >
                {({ selected }) => (
                  <span className={`wmx-block wmx-truncate ${selected ? 'wmx-font-medium' : 'wmx-font-normal'}`}>
                    {FONT_SIZES[key]}
                  </span>
                )}
              </Listbox.Option>
            ))}
          </Listbox.Options>
        </Transition>
      </div>
    </Listbox>
  );
};

export default FontSize;
