import { TouchableOpacity, View } from 'react-native';
import React, { ComponentType } from 'react';

import { Icon } from '../..';
import { emitter } from './Event';
import { useTheme } from '../ThemeContext';
import * as Events from '../../bindings/Events';

type ToolbarButtonProps = {
  icon: string;
  onPress: () => void;
  testID?: string;
  selected: boolean;
};
const ToolbarButton: ComponentType<ToolbarButtonProps> = ({ icon, onPress, testID, selected }: ToolbarButtonProps) => {
  const theme = useTheme();

  return (
    <TouchableOpacity
      onPress={onPress}
      style={selected ? theme.richTextEditor.selectedToolbarButton : theme.richTextEditor.toolbarButton}
      testID={testID}
    >
      <Icon icon={icon} />
    </TouchableOpacity>
  );
};

type buttonConfig = {
  icon: string;
  eventName: string;
};

const buttonConfigs: Record<string, buttonConfig> = {
  '|': { icon: '', eventName: '' },
  bold: { icon: 'format_bold', eventName: 'bold' },
  italic: { icon: 'format_italic', eventName: 'italic' },
  underline: { icon: 'format_underlined', eventName: 'underline' },
  bulletedList: { icon: 'format_list_bulleted', eventName: 'bulleted-list' },
  numberedList: { icon: 'format_list_numbered', eventName: 'numbered-list' },
  headingOne: { icon: 'looks_one', eventName: 'heading-one' },
  headingTwo: { icon: 'looks_two', eventName: 'heading-two' },
};

const defaultButtons = [
  'bold',
  'italic',
  'underline',
  '|',
  'bulletedList',
  'numberedList',
  '|',
  'headingOne',
  'headingTwo',
];

export type Props = {
  readonly buttons?: string[];
  readonly name: string;
  readonly testID?: string;
};

type ButtonType = {
  id: number;
  buttonName: string;
  selected: boolean;
};
const Toolbar: ComponentType<Props> = ({ name, buttons = defaultButtons, testID }: Props) => {
  const theme = useTheme();

  const [show, setShow] = React.useState(false);

  const initialToolbarButtonArray: ButtonType[] = buttons.map((button, index) => {
    return {
      id: index + 1,
      buttonName: button,
      selected: false,
    };
  });

  const [toolbarButtonArray, setToolbarButtonArray] = React.useState<ButtonType[]>(initialToolbarButtonArray);

  const normalizeEventName = (event: string) => `${name}/${event}`;

  React.useEffect(() => {
    const removeFocusListener = Events.on(emitter, normalizeEventName('editor-focus'), _ => setShow(_ => true));

    const removeBlurListener = Events.on(emitter, normalizeEventName('editor-blur'), _ => setShow(_ => false));

    return () => {
      removeFocusListener();
      removeBlurListener();
    };
  }, []);

  const updateButtonInArray = buttonId => {
    setToolbarButtonArray(current =>
      current.map(button => {
        if (button.id === buttonId) {
          return { ...button, selected: !button.selected };
        }

        return button;
      }),
    );
  };

  const toolbarButtons = React.useMemo(() => {
    return toolbarButtonArray.map(button => {
      if (button.buttonName === '|') {
        return <View key={button.id} style={theme.richTextEditor.separator} />;
      } else {
        const config = buttonConfigs[button.buttonName];
        if (config) {
          const buttonId = button.id;
          return (
            <ToolbarButton
              key={button.id}
              testID={config.icon}
              icon={config.icon}
              onPress={() => {
                updateButtonInArray(buttonId);
                Events.emit(emitter, normalizeEventName(config.eventName), null);
              }}
              selected={button.selected}
            />
          );
        } else {
          return null;
        }
      }
    });
  }, [toolbarButtonArray]);

  if (show) {
    return (
      <View testID={testID} style={theme.richTextEditor.toolbar}>
        {toolbarButtons}
      </View>
    );
  } else {
    return null;
  }
};

export default Toolbar;