import React, {Dispatch, SetStateAction} from 'react';
import {View, GestureResponderHandlers} from 'react-native';
import {styles} from './styles';
import {formatTime} from '../../utils';
import {Text} from 'react-native';

interface SeekbarProps {
  seekerFillWidth: number;
  seekerPosition: number;
  seekColor: string;
  cachedPosition: number;
  seekerPanHandlers: GestureResponderHandlers;
  setSeekerWidth: Dispatch<SetStateAction<number>>;
  time?: number;
  duration: number;
  showDuration: boolean;
  showTimeRemaining: boolean;
  showHours: boolean;
  // ── NEW ───────────────────────────────────────────────────────────────
  // Pass the same `seeking` boolean VideoPlayer already tracks through
  // your BottomControls component to Seekbar to get a VLC-style bubble
  // above the handle showing the exact second you're scrubbing to.
  // Optional and defaults to false, so this is safe to leave unwired —
  // nothing changes until you pass it.
  seeking?: boolean;
}

export const Seekbar = ({
  seekColor,
  seekerFillWidth,
  seekerPosition,
  cachedPosition,
  seekerPanHandlers,
  setSeekerWidth,
  showDuration,
  showHours,
  showTimeRemaining,
  time,
  duration,
  seeking = false,
}: SeekbarProps) => {
  return (
    <View
      style={{
        marginBottom: 55,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'flex-end',
      }}>
      <View>
        <Text
          style={{
            color: 'hsl(0, 0%, 70%)',
          }}>
          {formatTime({
            duration,
            time,
            showDuration,
            showHours,
            showTimeRemaining,
          })}
        </Text>
      </View>
      <View
        style={{...styles.container, width: '80%'}}
        collapsable={false}
        {...seekerPanHandlers}>
        <View
          style={styles.track}
          onLayout={(event) => setSeekerWidth(event.nativeEvent.layout.width)}
          pointerEvents={'none'}>
          <View
            style={[
              {
                width: cachedPosition,
                backgroundColor: '#dedede',
                height: 4,
                position: 'absolute',
                top: 0,
                borderRadius: 3,
              },
            ]}
            pointerEvents={'none'}
          />
          <View
            style={[
              styles.fill,
              {
                width: seekerFillWidth,
                backgroundColor: seekColor || '#FFF',
              },
            ]}
            pointerEvents={'none'}
          />
        </View>
        <View
          style={[styles.handle, {left: seekerPosition}]}
          pointerEvents={'none'}>
          {seeking && (
            <View
              pointerEvents="none"
              style={{
                position: 'absolute',
                bottom: 20,
                left: '50%',
                transform: [{translateX: -22}],
                minWidth: 44,
                paddingHorizontal: 6,
                paddingVertical: 3,
                borderRadius: 4,
                backgroundColor: 'rgba(0,0,0,0.85)',
                alignItems: 'center',
              }}>
              <Text
                style={{
                  color: '#fff',
                  fontSize: 11,
                  fontVariant: ['tabular-nums'],
                }}>
                {formatTime({
                  duration,
                  time,
                  showDuration: false,
                  showHours,
                  showTimeRemaining: false,
                })}
              </Text>
            </View>
          )}
          <View
            style={[styles.circle, {backgroundColor: seekColor || '#FFF'}]}
            pointerEvents={'none'}
          />
        </View>
      </View>
      <View style={{}}>
        <Text style={{color: 'hsl(0, 0%, 70%)'}}>
          {formatTime({
            duration,
            time: duration,
            showDuration,
            showHours,
            showTimeRemaining,
          })}
        </Text>
      </View>
    </View>
  );
};