import React, {memo} from 'react';
import {StyleSheet} from 'react-native';
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
import {AnimatedWaveForm} from '@components';
import {CHATS_SPACING} from '@modules/chats/utils';
import {useAiSummary} from '@modules/chats/contexts';
import {useWaveformBarHeights} from '@modules/chats/hooks/useWaveformBarHeights';
import {BORDER_RADIUS, useTheme} from '@shared/theme';

const CONTAINER_HEIGHT = CHATS_SPACING.inputMinHeight;

export const AiSummaryWaveform = memo(() => {
  const {theme} = useTheme();
  const {meteringLevel} = useAiSummary();

  const {liveBarHeights} = useWaveformBarHeights({
    meteringLevel,
  });

  return (
    <Animated.View
      style={[styles.container, {borderColor: theme.border.neutral.default}]}
      entering={FadeIn.duration(200)}
      exiting={FadeOut.duration(200)}>
      <AnimatedWaveForm normalizedBarsHeights={liveBarHeights} />
    </Animated.View>
  );
});

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    flex: 1,
    borderWidth: 1,
    borderRadius: BORDER_RADIUS.m,
    height: CONTAINER_HEIGHT,
  },
});
