import React from 'react';
import {LayoutChangeEvent, TouchableOpacity} from 'react-native';
import Animated, {
  SharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';
import {t} from 'i18next';
import {Typography} from '@components/_core';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props {
  recordType: SharedValue<'photo' | 'video'>;
  onPressPhotoType: () => void;
  onPressVideoType: () => void;
  onLayoutPhoto: (e: LayoutChangeEvent) => void;
  onLayoutVideo: (e: LayoutChangeEvent) => void;
  recordTypeSelectorX: SharedValue<number>;
  recordTypeSelectorWidth: SharedValue<number>;
  isRecordingSV: SharedValue<number>;
}

export const CameraTypeSelector: React.FC<Props> = ({
  recordType,
  onPressPhotoType,
  onPressVideoType,
  onLayoutPhoto,
  onLayoutVideo,
  recordTypeSelectorX,
  recordTypeSelectorWidth,
  isRecordingSV,
}) => {
  const bottom = useSafeAreaBottomPadding();
  const photoButtonAnimatedStyle = useAnimatedStyle(() => ({
    opacity: withTiming(recordType.value === 'photo' ? 1 : 0.5, {
      duration: 100,
    }),
  }));
  const videoButtonAnimatedStyle = useAnimatedStyle(() => ({
    opacity: withTiming(recordType.value === 'video' ? 1 : 0.5, {
      duration: 100,
    }),
  }));

  const animatedContainerStyle = useAnimatedStyle(() => ({
    opacity: withTiming(isRecordingSV.value === 1 ? 0 : 1, {
      duration: 100,
    }),
  }));

  return (
    <Animated.View
      style={[
        styles.recordTypeSelectorContainer,
        {paddingBottom: bottom},
        animatedContainerStyle,
      ]}>
      <TouchableOpacity
        onPress={onPressVideoType}
        style={styles.recordTypeSelectorItem}
        onLayout={onLayoutVideo}>
        <Animated.View style={videoButtonAnimatedStyle}>
          <Typography weight="semiBold" style={{color: COLORS.WHITE}}>
            {t('chat.camera.type_video')}
          </Typography>
        </Animated.View>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={onPressPhotoType}
        style={styles.recordTypeSelectorItem}
        onLayout={onLayoutPhoto}>
        <Animated.View style={photoButtonAnimatedStyle}>
          <Typography weight="semiBold" style={{color: COLORS.WHITE}}>
            {t('chat.camera.type_photo')}
          </Typography>
        </Animated.View>
      </TouchableOpacity>
      <Animated.View
        style={[
          styles.recordTypeSelectorActive,
          {
            left: recordTypeSelectorX,
            width: recordTypeSelectorWidth,
            bottom,
          },
        ]}
      />
    </Animated.View>
  );
};
