import {memo} from 'react';
import {StyleSheet, View} from 'react-native';
import {IconCheck, IconX} from '@tabler/icons-react-native';
import {IconButton} from '@components';
import {CHATS_SPACING} from '@modules/chats/utils';
import {useAiSummary} from '@modules/chats/contexts';
import {SPACING, useTheme} from '@shared/theme';

import {AiSummaryWaveform} from './AiSummaryWaveform';

export const AiSummaryRecording = memo(() => {
  const {theme} = useTheme();
  const {isActive, isProcessing, cancelRecording, finishRecording} =
    useAiSummary();

  if (!isActive || isProcessing) {
    return null;
  }

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.tertiary},
      ]}>
      <View style={styles.content}>
        <IconButton
          Icon={IconX}
          variant="tertiary"
          onPress={cancelRecording}
          useGestureHandler
        />
        <AiSummaryWaveform />
        <IconButton
          Icon={IconCheck}
          variant="primary"
          onPress={finishRecording}
          useGestureHandler
        />
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    padding: SPACING.x1,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING['x0.5'],
    height: CHATS_SPACING.inputMinHeight,
    padding: SPACING.x1,
  },
});
