import React, { useRef, useState } from 'react';
import { EmojiPickerModal } from '../features/workspace/EmojiPickerModal';

interface EmojiIconButtonProps {
  value: string;
  onChange: (emoji: string) => void;
  // Default icon; removing the icon in the picker goes back to it
  fallback: string;
}

// Icon field of the create dialogs (note, task list, list): the emoji as a button that opens the same
// picker as the icon of an open note (Doku/ui-patterns.md).
export const EmojiIconButton: React.FC<EmojiIconButtonProps> = ({ value, onChange, fallback }) => {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [anchor, setAnchor] = useState<DOMRect | null>(null);
  return (
    <>
      <button
        ref={buttonRef}
        type="button"
        onClick={() => setAnchor((cur) => (cur ? null : buttonRef.current?.getBoundingClientRect() ?? null))}
        title="Icon auswählen"
        aria-label="Icon auswählen"
        className="w-12 sm:w-10 h-11 sm:h-8 flex-shrink-0 flex items-center justify-center input-field text-lg sm:text-base leading-none cursor-pointer hover:border-strong"
      >
        {value || fallback}
      </button>
      {anchor && (
        <EmojiPickerModal
          currentIcon={value}
          anchor={anchor}
          onSelectEmoji={(emoji) => {
            onChange(emoji || fallback);
            setAnchor(null);
          }}
          onClose={() => setAnchor(null)}
        />
      )}
    </>
  );
};