import Tippy from '@tippyjs/react';
import { useEditorState } from '@tiptap/react';
import {
  Bold as BoldIcon,
  Eraser,
  Italic as ItalicIcon,
  Strikethrough,
  TextAlignCenterIcon,
  TextAlignEndIcon,
  TextAlignJustifyIcon,
  TextAlignStartIcon,
  Underline as UnderlineIcon,
} from 'lucide-react';
import cn from '../../../../../../../../utils/cn';
import CustomPicker from '../../BadgeColors/components/CustomPicker';
import FontSize from './FontSize';
import ToolbarButton from './ToolbarButton';

const EditorToolbar = ({ editor }) => {
  const editorState = useEditorState({
    editor,
    selector: (ctx) => {
      return {
        fontSize: ctx.editor.getAttributes('textStyle').fontSize,
        color: ctx.editor.getAttributes('textStyle').color,
        highlight: ctx.editor.getAttributes('highlight').color,
      };
    },
  });

  const buttons = [
    {
      icon: <BoldIcon className='wmx-size-4' />,
      active: editor.isActive('bold'),
      action: () => editor.chain().focus().toggleBold().run(),
    },
    {
      icon: <ItalicIcon className='wmx-size-4' />,
      active: editor.isActive('italic'),
      action: () => editor.chain().focus().toggleItalic().run(),
    },
    {
      icon: <UnderlineIcon className='wmx-size-4' />,
      active: editor.isActive('underline'),
      action: () => editor.chain().focus().toggleUnderline().run(),
    },
    {
      icon: <Strikethrough className='wmx-size-4' />,
      active: editor.isActive('strike'),
      action: () => editor.chain().focus().toggleStrike().run(),
    },

    'divider',
    {
      icon: <TextAlignStartIcon className='wmx-size-4' />,
      active: editor.isActive({ textAlign: 'left' }),
      action: () => editor.chain().focus().setTextAlign('left').run(),
    },
    {
      icon: <TextAlignCenterIcon className='wmx-size-4' />,
      active: editor.isActive({ textAlign: 'center' }),
      action: () => editor.chain().focus().setTextAlign('center').run(),
    },
    {
      icon: <TextAlignEndIcon className='wmx-size-4' />,
      active: editor.isActive({ textAlign: 'right' }),
      action: () => editor.chain().focus().setTextAlign('right').run(),
    },
    {
      icon: <TextAlignJustifyIcon className='wmx-size-4' />,
      active: editor.isActive({ textAlign: 'justify' }),
      action: () => editor.chain().focus().setTextAlign('justify').run(),
    },
  ];

  if (!editor) return null;

  return (
    <div className='wmx-flex wmx-flex-wrap wmx-items-center wmx-gap-1 wmx-bg-white wmx-px-2 wmx-py-1 wmx-rounded-t-lg'>
      <FontSize fontSize={editorState.fontSize} editor={editor} />
      <CustomPicker
        tooltip='Text Color'
        hideControls
        buttonClass='wmx-size-[18px] wmx-ml-1'
        showButtonIcon={false}
        value={editorState.color}
        onChange={(value) => {
          editor.chain().focus().setColor(value).run();
        }}
      />

      <div className='wmx-w-px wmx-h-5 wmx-bg-gray-300 wmx-mx-2' />

      {buttons.map((btn, idx) =>
        btn === 'divider' ? (
          <div key={`divider-${idx}`} className='wmx-w-px wmx-h-5 wmx-bg-gray-300 wmx-mx-2' />
        ) : (
          <ToolbarButton key={idx} icon={btn.icon} isActive={btn.active} onClick={btn.action} />
        )
      )}

      <div className='wmx-w-px wmx-h-5 wmx-bg-gray-300 wmx-mx-2' />

      <div className='wmx-flex wmx-text-center wmx-gap-2'>
        <CustomPicker
          tooltip='Text Background Color'
          hideControls
          buttonClass='wmx-size-[18px]'
          showButtonIcon={false}
          value={editorState.highlight}
          onChange={(value) => {
            editor.chain().focus().setHighlight({ color: value }).run();
          }}
        />
        <Tippy
          content='Remove Text Background Color'
          className='wmx-bg-gray-900 wmx-text-white wmx-rounded wmx-px-2 wmx-py-1 wmx-text-xs'
        >
          <button
            type='button'
            className={cn('wmx-text-gray-500')}
            onClick={() => {
              editor.chain().focus().unsetHighlight().run();
            }}
          >
            <Eraser className='wmx-size-[18px]' />
          </button>
        </Tippy>
      </div>
    </div>
  );
};

export default EditorToolbar;
