import React, {memo} from 'react';
import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
import {Pressable} from '@components';
import {useAiSummary} from '@modules/chats/contexts';
import IconAiSummary from '@modules/chats/assets/icons/IconAiSummary.svg';
import {AMPLITUDE_EVENTS} from '@shared/constants';
import {SPACING, useTheme} from '@shared/theme';
import {logAmplitudeEvent} from '@shared/utils';

export const AI_SUMMARY_BUTTON_SIZE = 30;

export const AiSummaryButton = memo(() => {
  const {theme} = useTheme();
  const {isProcessing, startRecording, setButtonLayout} = useAiSummary();

  if (isProcessing) {
    return null;
  }

  const onLayout = (event: LayoutChangeEvent) => {
    setButtonLayout(event.nativeEvent.layout);
  };

  const onPress = () => {
    logAmplitudeEvent(AMPLITUDE_EVENTS.CHATS_2_VOICENOTE_CEO_RECORDING_STARTED);
    startRecording();
  };

  return (
    <Pressable onPress={onPress} onLayout={onLayout} useGestureHandler>
      <View
        style={[
          styles.container,
          {backgroundColor: theme.button.background.primary.default},
        ]}>
        <IconAiSummary color={theme.white} />
      </View>
    </Pressable>
  );
});

export const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    borderRadius: AI_SUMMARY_BUTTON_SIZE / 2,
    flexDirection: 'row',
    height: AI_SUMMARY_BUTTON_SIZE,
    justifyContent: 'center',
    minWidth: AI_SUMMARY_BUTTON_SIZE,
    overflow: 'hidden',
  },
  label: {marginLeft: SPACING['x0.5']},
});
