import React, {useCallback, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {BottomModalRoot} from '@components';
import {TabItem, Tabs, TabsRenderScene} from '@components/index';
import {PublicIcon} from '@interfaces/icon';
import ReactionPickerList from '@modules/app/components/AppModals/components/ReactionPicker/components/ReactionPickerList';

import {styles} from './styles';
import IconPicker from './components/IconPicker';

interface Props {
  onPickIcon: (icon: PublicIcon) => void;
  onPickEmoji: (emoji: string) => void;
  isVisible: boolean;
  onCloseModal: () => void;
}

enum ModalTabKey {
  Icons = 'Icons',
  Emojis = 'Emojis',
}

function GroupIconModalPicker({
  onPickIcon,
  onPickEmoji,
  isVisible,
  onCloseModal,
}: Props) {
  const {t} = useTranslation();
  const [expanded, setExpanded] = useState(false);

  const onCloseIconModal = () => {
    onCloseModal();
  };

  const routes: TabItem[] = useMemo(
    () => [
      {key: ModalTabKey.Icons, label: t('group.icons')},
      {key: ModalTabKey.Emojis, label: t('group.emojis')},
    ],
    [t],
  );

  const renderScene = useCallback(
    ({route}: TabsRenderScene<TabItem>) => {
      switch (route.key) {
        case ModalTabKey.Icons:
          return <IconPicker onPickIcon={onPickIcon} />;
        case ModalTabKey.Emojis:
          return (
            <ReactionPickerList
              expanded={expanded}
              show={isVisible}
              onEmojiSelected={onPickEmoji}
            />
          );
        default:
          return null;
      }
    },
    [expanded, isVisible, onPickEmoji, onPickIcon],
  );

  const onChange = useCallback((index: number) => {
    index === 1 && setExpanded(true);
  }, []);

  return (
    <BottomModalRoot
      isVisible={isVisible}
      onClose={onCloseIconModal}
      snapPoints={['70%', '90%']}
      onChange={onChange}>
      <View style={styles.tabsContainer}>
        <Tabs swipeEnabled={false} renderScene={renderScene} routes={routes} />
      </View>
    </BottomModalRoot>
  );
}

export default GroupIconModalPicker;