import React from 'react';
import { cn, withRef } from '@udecode/cn';
import { PlateElement } from '@udecode/plate-common';
import { Emoji, useEmojiDropdownMenuState } from '@udecode/plate-emoji';
import { cva } from 'class-variance-authority';

import {
  emojiCategoryIcons,
  emojiSearchIcons,
} from '@/components/plate-ui/emoji-icons';
import { EmojiPicker } from '@/components/plate-ui/emoji-picker';
import { EmojiToolbarDropdown } from '@/components/plate-ui/emoji-toolbar-dropdown';

import { useHighlightState } from '../highlight-block-store';
import { HighLightPopover } from './popover';

export const HighlightComponent = withRef<typeof PlateElement>(
  ({ className, children, ...props }, ref) => {
    const { element, setHighlightState } = useHighlightState();
    const { category, emoji, bgColor, borderColor } = element;

    const { isOpen, setIsOpen, emojiPickerState } = useEmojiDropdownMenuState({
      closeOnSelect: true,
    });

    const onSelectEmoji = React.useCallback(
      (emojiValue: Emoji) => {
        setHighlightState({ emoji: emojiValue.skins[0].native });
        setIsOpen(false);
      },
      [setHighlightState, setIsOpen]
    );

    const container = cva(
      ['flex', 'border', 'rounded', 'border-transparent', 'p-4'],
      {
        variants: {
          category: {
            note: ['bg-amber-50', 'border-amber-200'],
            info: ['bg-gray-50', 'border-slate-200'],
            warning: ['bg-red-50', 'border-red-200'],
            tip: ['bg-green-50', 'border-green-200'],
          },
        },
        compoundVariants: [
          {
            category: 'note',
          },
        ],
        defaultVariants: {
          category: 'note',
        },
      }
    );

    return (
      <HighLightPopover>
        <PlateElement
          ref={ref}
          className={cn(
            container({ category: category }),
            'my-2',
            bgColor,
            borderColor,
            className
          )}
          {...props}
        >
          <div className="flex items-start gap-2 rounded-md text-sm">
            {element.showEmoji && element.emoji && (
              <EmojiToolbarDropdown
                control={
                  <div
                    contentEditable={false}
                    className="cursor-pointer rounded-sm p-1 text-[18px] transition-colors ease-in-out hover:bg-slate-200"
                  >
                    {emoji}
                  </div>
                }
                isOpen={isOpen}
                setIsOpen={setIsOpen}
              >
                <EmojiPicker
                  {...emojiPickerState}
                  onSelectEmoji={onSelectEmoji}
                  isOpen={isOpen}
                  setIsOpen={setIsOpen}
                  icons={{
                    categories: emojiCategoryIcons,
                    search: emojiSearchIcons,
                  }}
                />
              </EmojiToolbarDropdown>
            )}
            <div>{children}</div>
          </div>
        </PlateElement>
      </HighLightPopover>
    );
  }
);
