import { useEffect, useRef, useState } from 'react';
import {
  View,
  TouchableOpacity,
  Animated,
  StyleSheet,
  type ViewStyle,
} from 'react-native';
import { useTheme } from '../hooks/ThemeProvider';
import RsText from './RsText';
import type { Theme } from '../styles/types';

type Choice<T> = {
  label: string;
  value: T;
};

type RsToggleButtonProps<T> = {
  choices: [Choice<T>, Choice<T>];
  value: T;
  onChange: (value: T) => void;
  style?: ViewStyle;
};

const CONTAINER_PADDING = 2;

function RsToggleButton<T extends string | number>({
  choices,
  value,
  onChange,
  style,
}: RsToggleButtonProps<T>) {
  const theme = useTheme();
  const styles = generateStyles(theme);

  // State to store the container width
  const [containerWidth, setContainerWidth] = useState<number>(0);

  // Calculate pill width based on container width and number of choices
  const pillWidth = containerWidth / choices.length - CONTAINER_PADDING * 2;

  const selectedIndex = choices.findIndex((c) => c.value === value);

  // Animated value for translateX
  const translateX = useRef(
    new Animated.Value(selectedIndex * pillWidth)
  ).current;

  useEffect(() => {
    Animated.timing(translateX, {
      toValue: selectedIndex * pillWidth,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [selectedIndex, pillWidth, translateX]);

  const animatedStyle = {
    width: pillWidth,
    transform: [{ translateX }],
  };

  return (
    <View
      style={[styles.container, style]}
      onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
    >
      {/* Animated pill */}
      {containerWidth > 0 && (
        <Animated.View style={[styles.pill, animatedStyle]} />
      )}
      {choices.map((c, _idx) => {
        const selected = value === c.value;
        return (
          <TouchableOpacity
            key={String(c.value)}
            style={styles.touchable}
            onPress={() => {
              if (!selected) onChange(c.value);
            }}
            activeOpacity={0.8}
          >
            <RsText
              text={c.label}
              fontSize={16}
              color={
                selected
                  ? theme.Text.primaryButtonText
                  : theme.Text.secondaryButtonText
              }
              fontWeight={selected ? 'Bold' : 'Regular'}
            />
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

export default RsToggleButton;

function generateStyles(theme: Theme) {
  return StyleSheet.create({
    container: {
      flexDirection: 'row',
      backgroundColor: theme.Background.input,
      borderRadius: 10,
      borderWidth: 1,
      borderColor: theme.Borders.input,
      overflow: 'hidden',
      alignSelf: 'center',
      width: '100%', // Make it take full width of parent
      height: 52,
      padding: CONTAINER_PADDING,
      direction: 'ltr',
    },
    pill: {
      position: 'absolute',
      top: CONTAINER_PADDING,
      left: CONTAINER_PADDING,
      height: '100%',
      backgroundColor: theme.Background.primaryButton,
      borderRadius: 8,
      borderWidth: 1,
      borderColor: theme.Borders.primaryButton,
      zIndex: 0,
    },
    touchable: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1,
    },
  });
}