import React, {useCallback, useMemo} from 'react';
import {Pressable} from 'react-native';
import Animated from 'react-native-reanimated';
import Slider from '@react-native-community/slider';
import {
  IconMaximize,
  IconPlayerPauseFilled,
  IconPlayerPlayFilled,
  IconRotate,
} from '@tabler/icons-react-native';
import {Typography} from '@components/_core/Typography';
import {IconButton} from '@components/_HuGo/Button';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import {formatTime} from './utils';
import {VideoPlayerControlsProps, VideoState, VideoStatus} from './interfaces';
import {useVideoControlsVisibility, useVideoSlider} from './hooks';

export {VideoPlayerControlsProps, VideoState, VideoStatus};

export function VideoPlayerControls({
  videoState: {status, currentTime, duration},
  onUpdateVideoState,
  onFullscreen,
  onSeekTime,
  onReplay,
  showTimeLine = true,
}: VideoPlayerControlsProps) {
  const {theme} = useTheme();
  const {
    showControls,
    onInteraction,
    onToggleControls,
    onManualPlayOrReplay,
    animatedStyle,
  } = useVideoControlsVisibility({status, hideDuringAutoplay: true});

  const {
    sliderValue,
    onSlidingStart,
    onValueChange,
    onSlidingComplete,
    onReplay: onSliderReplay,
  } = useVideoSlider({
    currentTime,
    duration,
    status,
    onSeekTime,
    onUpdateVideoState,
    onInteraction,
  });

  const formattedDuration = useMemo(() => formatTime(duration), [duration]);

  const onReplayPress = useCallback(() => {
    onSliderReplay();
    onReplay();
    onManualPlayOrReplay();
  }, [onSliderReplay, onReplay, onManualPlayOrReplay]);

  const onPlayPress = useCallback(() => {
    onUpdateVideoState({status: VideoStatus.Playing});
    onManualPlayOrReplay();
  }, [onUpdateVideoState, onManualPlayOrReplay]);

  const onPausePress = useCallback(() => {
    onUpdateVideoState({status: VideoStatus.Paused});
    onInteraction();
  }, [onUpdateVideoState, onInteraction]);

  const onFullscreenPress = useCallback(() => {
    onFullscreen();
    onInteraction();
  }, [onFullscreen, onInteraction]);

  return (
    <>
      <Pressable style={styles.touchOverlay} onPress={onToggleControls} />
      <Animated.View
        pointerEvents={showControls ? 'auto' : 'none'}
        style={[
          styles.container,
          {
            backgroundColor: theme.neutralTextTransparent60,
          },
          animatedStyle,
          !showTimeLine && styles.timeLineHidden,
        ]}>
        {status === VideoStatus.Finished ? (
          <IconButton
            Icon={IconRotate}
            onPress={onReplayPress}
            variant="tertiary"
            iconColor={theme.neutralTextInverted}
          />
        ) : (
          <IconButton
            Icon={
              status === VideoStatus.Playing
                ? IconPlayerPauseFilled
                : IconPlayerPlayFilled
            }
            onPress={
              status === VideoStatus.Playing ? onPausePress : onPlayPress
            }
            variant="tertiary"
            iconColor={theme.neutralTextInverted}
          />
        )}
        {showTimeLine && (
          <>
            <Typography
              style={styles.timeText}
              variant="xxs"
              color={theme.neutralTextInverted}>
              {formatTime(currentTime)}
            </Typography>
            <Slider
              style={styles.slider}
              minimumValue={0}
              maximumValue={1}
              value={sliderValue}
              minimumTrackTintColor={theme.primary}
              maximumTrackTintColor={theme.neutralTextInverted}
              thumbTintColor={theme.primary}
              onValueChange={onValueChange}
              onSlidingStart={onSlidingStart}
              onSlidingComplete={onSlidingComplete}
              tapToSeek
            />
            <Typography
              style={styles.timeText}
              variant="xxs"
              color={theme.neutralTextInverted}>
              {formattedDuration}
            </Typography>
          </>
        )}
        <IconButton
          Icon={IconMaximize}
          onPress={onFullscreenPress}
          variant="tertiary"
          iconColor={theme.neutralTextInverted}
        />
      </Animated.View>
    </>
  );
}