import React, {useCallback, useMemo} from 'react';
import {View} from 'react-native';
import {IconVolume, IconVolumeOff} from '@tabler/icons-react-native';
import {IconButton} from '@components/_HuGo/Button';
import {toggleAppMuted} from '@redux/dispatchers';
import {useAppMuted} from '@redux/selectors';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  show?: boolean;
  onMutedToggle?: () => void;
  muted?: boolean;
}

export function VolumeButton({show, onMutedToggle, muted: mutedProp}: Props) {
  const {theme, spacing} = useTheme();
  const mutedVideos = useAppMuted();

  const muted = useMemo(
    () => (mutedProp !== undefined ? mutedProp : mutedVideos),
    [mutedProp, mutedVideos],
  );

  const onPress = useCallback(() => {
    if (onMutedToggle) {
      onMutedToggle();
    } else {
      toggleAppMuted();
    }
  }, [onMutedToggle]);

  return show ? (
    <View style={styles.container}>
      <IconButton
        hitSlop={spacing.x1}
        Icon={muted ? IconVolumeOff : IconVolume}
        iconColor={theme.text.neutral.inverted}
        onPress={onPress}
        size="sm"
        style={styles.contentContainer}
        variant="flat"
      />
    </View>
  ) : null;
}
