import {memo, useCallback, useEffect} from 'react';
import {StyleSheet} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconPlus, IconX} from '@tabler/icons-react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import {IconButton} from '@components';
import {
  useAiSummary,
  useMentions,
  useMessageActionsContext,
} from '@modules/chats/contexts';
import {useInstanceProp} from '@redux/selectors';
import {SPACING} from '@shared/theme';

import {useSelectFileDialog} from '../AnimationProvider';

type Props = {
  clearInput: () => void;
};

export const FooterLeftContent = memo(({clearInput}: Props) => {
  const {t} = useTranslation();
  const isAttachmentsEnabled = useInstanceProp('allowAttachmentsInChats');
  const {isEditing, reset} = useMessageActionsContext();
  const {isDialogVisible, showDialog, hideDialog} = useSelectFileDialog();
  const {setIsDialogVisible: updateIsMentionDialogVisible} = useMentions();
  const addSharedValue = useSharedValue(0);
  const {isActive: isAiSummaryActive} = useAiSummary();

  const onCancelEditionPress = () => {
    reset();
    clearInput();
  };

  const closeAttachmentDialog = useCallback(() => {
    addSharedValue.value = withTiming(0, {duration: 100});
    hideDialog();
  }, [addSharedValue, hideDialog]);

  const toggleAddDialog = useCallback(() => {
    if (isDialogVisible) {
      closeAttachmentDialog();
    } else {
      updateIsMentionDialogVisible(false);
      addSharedValue.value = withTiming(45, {duration: 100});
      showDialog();
    }
  }, [
    addSharedValue,
    closeAttachmentDialog,
    isDialogVisible,
    showDialog,
    updateIsMentionDialogVisible,
  ]);

  const addAnimatedStyle = useAnimatedStyle(() => {
    if (!_WORKLET) {
      return {
        transform: [{rotate: '0deg'}],
      };
    }
    return {
      transform: [{rotate: `${addSharedValue.value}deg`}],
    };
  }, [addSharedValue]);

  useEffect(() => {
    if (!isDialogVisible && addSharedValue.value > 0) {
      closeAttachmentDialog();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isDialogVisible]);

  return (
    <>
      {isEditing ? (
        <IconButton
          Icon={IconX}
          variant="tertiary"
          onPress={onCancelEditionPress}
          hitSlop={SPACING['x1.5']}
          accessibilityLabel={t('chat.edit.discard_button')}
          useGestureHandler
        />
      ) : isAttachmentsEnabled ? (
        <Animated.View style={addAnimatedStyle}>
          <IconButton
            Icon={IconPlus}
            onPress={toggleAddDialog}
            style={styles.addButton}
            accessibilityLabel={
              isDialogVisible
                ? t('general.cancel')
                : t('general.attachment.add.title_long_other')
            }
            variant="flat"
            disabled={isAiSummaryActive}
            useGestureHandler
          />
        </Animated.View>
      ) : null}
    </>
  );
});

const styles = StyleSheet.create({
  addButton: {
    alignItems: 'center',
    height: SPACING.x5,
    justifyContent: 'center',
    width: SPACING.x5,
  },
});
