import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {ScrollView} from 'react-native-gesture-handler';
import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated';
import {EditorBridge, Toolbar} from '@10play/tentap-editor';
import {IconBaseline} from '@tabler/icons-react-native';
import {useGetAttachmentsLimit} from '@hooks/useGetAttachmentsLimit';
import {useTheme} from '@shared/theme';

import {BaseButton} from '../Footer';
import {styles} from './styles';
import SegmentationIcon from '../SegmentationIcon';
import GifDisplayer from '../Footer/components/GifDisplayer';
import AddImage from '../Footer/components/AddImage';
import AddVideo from '../Footer/components/AddVideo';
import SelectFile from '../Footer/components/SelectFile';
import ImageOrVideo from '../Footer/components/ImageOrVideo';
import AddPoll from '../Footer/components/AddPoll';

interface Props {
  attachmentsSize: number;
  paddingBottom: SharedValue<number>;
  canShowPoll?: boolean;
  handleSegmentationPress?: () => void;
  disabledSegmentation?: boolean;
  editor: EditorBridge;
  showRichTextInput: boolean;
  toggleShowToolbar: () => void;
  showToolbar: boolean;
}

function PublishIconOptions({
  attachmentsSize,
  paddingBottom,
  canShowPoll,
  editor,
  showRichTextInput,
  toggleShowToolbar,
  showToolbar,
  disabledSegmentation,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {maxAttachmentsSize} = useGetAttachmentsLimit();
  const hasMaxSize = attachmentsSize > maxAttachmentsSize;

  const animatedStyle = useAnimatedStyle(() => ({
    paddingBottom: paddingBottom.value,
  }));

  return (
    <Animated.View
      style={[
        animatedStyle,
        {backgroundColor: theme.background.elements.grey},
      ]}>
      {showRichTextInput && showToolbar && (
        <View style={styles.toolbarContainer}>
          <Toolbar
            editor={editor}
            insertText={t('post.insert')}
            typeUrlText={t('post.type_url_here')}
          />
        </View>
      )}
      <View
        style={[
          styles.footer,
          {backgroundColor: theme.background.elements.grey},
        ]}>
        <ScrollView horizontal contentContainerStyle={styles.buttonIcons}>
          {showRichTextInput && (
            <BaseButton
              Icon={IconBaseline}
              active={showToolbar}
              onPress={toggleShowToolbar}
            />
          )}
          <AddImage hasMaxSize={hasMaxSize} />
          <AddVideo hasMaxSize={hasMaxSize} />
          <ImageOrVideo hasMaxSize={hasMaxSize} />
          <SelectFile hasMaxSize={hasMaxSize} />
          <GifDisplayer hasMaxSize={hasMaxSize} />
          {canShowPoll && <AddPoll />}
        </ScrollView>
        {!disabledSegmentation && <SegmentationIcon />}
      </View>
    </Animated.View>
  );
}

export default PublishIconOptions;
