import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { applyStyles, childSpacingStyle, focusedStyleOverrides } from '../../utils/styles';
import { TemplateRenderer } from '../TemplateRenderer';
import { usePaywallContext } from '../../context/PaywallContext';
import { handleAction } from '../../utils/actionHandler';
import { getVideoControlState, subscribeVideoControls } from '../../utils/videoControls';
import type { TComponent } from '@namiml/sdk-core';
import { FocusedStyleProvider, useFocusableState, useFocusEnabled, useRegisterPreferredFocus } from '../../context/FocusContext';
import { useTVPreferredFocus } from '../../utils/tvFocus';

interface Props {
  component: any;
  scaleFactor: number;
  onClose?: () => void;
  parentDirection?: string;
}

export const NamiVolumeButton: React.FC<Props> = ({
  component,
  scaleFactor,
  onClose,
  parentDirection,
}) => {
  const ctx = usePaywallContext();
  const focusEnabled = useFocusEnabled();
  const pressableRef = useRef<any>(null);
  const { isFocused, onFocus, onBlur } = useFocusableState(
    Boolean(component.focused),
    focusEnabled,
  );
  useTVPreferredFocus(
    pressableRef,
    focusEnabled && Boolean(component.focused),
  );
  useRegisterPreferredFocus(
    pressableRef.current,
    focusEnabled && Boolean(component.focused),
  );
  const [muted, setMuted] = useState(getVideoControlState().muted);

  useEffect(() => subscribeVideoControls((next) => setMuted(next.muted)), []);

  const containerStyle = useMemo(() => {
    const base = applyStyles(component, scaleFactor, false, parentDirection);
    if (isFocused) {
      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
    }
    return base;
  }, [component, scaleFactor, parentDirection, isFocused]);

  const onPress = () => {
    handleAction({
      onTap: muted ? component.mutedOnTap : component.volumeOnTap,
      ctx,
      onClose,
    });
  };

  const direction = component.direction ?? 'horizontal';
  const children = (muted ? component.mutedComponents : component.volumeComponents) ?? [];

  return (
    <Pressable
      ref={pressableRef}
      onPress={onPress}
      onFocus={onFocus}
      onBlur={onBlur}
      hasTVPreferredFocus={focusEnabled && Boolean(component.focused)}
      style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null]}
    >
      <FocusedStyleProvider focused={isFocused}>
        {children.map((child: TComponent, i: number) => (
          <View
            key={child.id ?? i}
            style={i === 0 ? null : childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor)}
          >
            <TemplateRenderer
              component={child}
              scaleFactor={scaleFactor}
              onClose={onClose}
              parentDirection={direction}
            />
          </View>
        ))}
      </FocusedStyleProvider>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  pressed: { opacity: 0.7 },
});