import { EmojiType, IEmojiIcon } from '@vev/utils';
import React, { useState } from 'react';
import { useFormField } from '../../hooks/form';
import { SilkeBox } from '../silke-box';
import { SilkeButtonProps } from '../silke-button';
import { FormFieldProps, FormValidator } from '../silke-form';
import { SilkeIcons } from '../silke-icon/silke-icon';
import { SilkeOverflowMenu } from '../silke-overflow-menu';
import { SilkeTab, SilkeTabs } from '../silke-tabs';
import { SilkeText } from '../silke-text';
import EmojiTab from './emoji-tab';
import IconsTab from './icons-tab';
import UploadTab from './upload-tab';

type SilkeIconPickerProps = {
  fallback?: SilkeIcons;
  required?: boolean;
  type?: 'emojis' | 'icon' | 'upload';
} & FormFieldProps<IEmojiIcon> &
  Omit<SilkeButtonProps, 'icon' | 'type' | 'onChange'>;

const validate: FormValidator<SilkeIconPickerProps> = (props, value) => {
  if (props.required && value === undefined) return 'Required';
};

export function SilkeIconPicker(props: SilkeIconPickerProps) {
  const {
    fallback,
    value,
    label,
    className,
    name,
    required,
    kind,
    size,
    type: singleType,
    title,
    onChange,
  } = useFormField(props, validate);
  const [type, setType] = useState<EmojiType>(
    singleType === 'emojis'
      ? EmojiType.emoji
      : singleType === 'icon'
        ? EmojiType.icon
        : singleType === 'upload'
          ? EmojiType.upload
          : EmojiType.emoji,
  );
  const [open, setOpen] = useState(false);

  const handleSelect = (icon: IEmojiIcon | null) => {
    setOpen(false);
    onChange(icon);
  };

  const button = (
    <SilkeOverflowMenu
      size={size}
      icon={value || fallback || 'emoji.add'}
      open={open}
      kind={kind || 'secondary'}
      name={name}
      title={title}
      className={className}
      anchorOrigin="bottom-left"
      targetOrigin="top-left"
      onToggleOpen={setOpen}
    >
      <SilkeBox column bg="blur" style={{ width: 456, height: 320, borderRadius: 8 }}>
        {!singleType && (
          <SilkeTabs>
            <SilkeTab
              label="Emojis"
              active={type === EmojiType.emoji}
              onClick={() => setType(EmojiType.emoji)}
            />
            <SilkeTab
              label="Icons"
              active={type === EmojiType.icon}
              onClick={() => setType(EmojiType.icon)}
            />
            <SilkeTab
              label="Upload"
              active={type === EmojiType.upload}
              onClick={() => setType(EmojiType.upload)}
            />
          </SilkeTabs>
        )}
        {type === EmojiType.emoji ? (
          <EmojiTab icon={value} onSelect={handleSelect} />
        ) : type === EmojiType.icon ? (
          <IconsTab icon={value} onSelect={handleSelect} />
        ) : (
          <UploadTab icon={value} onSelect={handleSelect} />
        )}
      </SilkeBox>
    </SilkeOverflowMenu>
  );
  if (!label) return button;
  return (
    <SilkeBox hAlign="start" vAlign="center" gap="m">
      {button}
      {label && <SilkeText>{label}</SilkeText>}
    </SilkeBox>
  );
}