import { ThemeType, useTheme } from "../../theme"; // Adjust import path
import React, { useCallback, useMemo, useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  StyleProp,
  ViewStyle,
  TextStyle,
  LayoutAnimation, // Optional: for smoother transitions
  Platform,
  UIManager,
} from "react-native";

// Optional: Enable LayoutAnimation on Android
if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

export interface TabSelectorProps {
  tabs: string[];
  initialTab?: string;
  onTabChange?: (selectedTab: string) => void;
  containerStyle?: StyleProp<ViewStyle>;
  tabStyle?: StyleProp<ViewStyle>;
  activeTabStyle?: StyleProp<ViewStyle>;
  tabTextStyle?: StyleProp<TextStyle>;
  activeTabTextStyle?: StyleProp<TextStyle>;
  separatorStyle?: StyleProp<ViewStyle>;
  animated?: boolean;
}

const TabSelector: React.FC<TabSelectorProps> = ({
  tabs,
  initialTab,
  onTabChange,
  containerStyle,
  tabStyle,
  activeTabStyle,
  tabTextStyle,
  activeTabTextStyle,
  separatorStyle,
  animated = false,
}) => {
  const { theme, isRTL } = useTheme();
  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);

  const defaultTab = useMemo(
    () => initialTab ?? (tabs && tabs.length > 0 ? tabs[0] : ""),
    [initialTab, tabs]
  );

  const [activeTab, setActiveTab] = useState<string>(defaultTab);

  const handleTabPress = useCallback(
    (tab: string) => {
      if (tab !== activeTab) {
        if (animated) {
          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        }
        setActiveTab(tab);
        onTabChange?.(tab);
      }
    },
    [activeTab, onTabChange, animated]
  );

  return (
    <View style={[styles.container, containerStyle]}>
      {tabs.map((tab, index) => {
        const isSelected = tab === activeTab;
        const isLastTab = index === tabs.length - 1;

        // const nextTabIsSelected = !isLastTab && tabs[index + 1] === activeTab;

        // const showSeparator = !isLastTab && !isSelected && !nextTabIsSelected;

        return (
          <React.Fragment key={tab}>
            <TouchableOpacity
              style={[
                styles.tab,
                tabStyle,
                isSelected && styles.activeTab,
                isSelected && activeTabStyle,
              ]}
              onPress={() => handleTabPress(tab)}
              activeOpacity={0.8}
              accessibilityRole="tab"
              accessibilityState={{ selected: isSelected }}
              accessibilityLabel={tab}
            >
              <Text
                style={[
                  styles.tabText,
                  tabTextStyle,
                  isSelected && styles.activeTabText,
                  isSelected && activeTabTextStyle,
                ]}
              >
                {tab}
              </Text>
            </TouchableOpacity>
            {/* {showSeparator && ( */}
              {/* <View style={[styles.separator, separatorStyle]} /> */}
            {/* )} */}
          </React.Fragment>
        );
      })}
    </View>
  );
};

const themedStyles = (theme: ThemeType, isRTL: boolean) =>
  StyleSheet.create({
    container: {
      flexDirection: isRTL ? "row-reverse" : "row",
      alignItems: "flex-end",
      backgroundColor: theme.surface,
    },
    tab: {
      paddingVertical: 12,
      paddingHorizontal: 16,
      justifyContent: "center",
      alignItems: "center",
    //   borderRightWidth: 1,
    //   borderRightColor:"red"
    //   borderBottomWidth: 1,
    //   borderBottomColor: theme.border,
    },
    activeTab: {
      backgroundColor: theme.primary,
      borderTopLeftRadius: 6,
      borderTopRightRadius: 6,
      borderBottomWidth: 0,
    },
    tabText: {
      color: theme.onSurface,
      fontSize: 14,
      fontWeight: "500",
    },
    activeTabText: {
      color: theme.onPrimary,
      fontWeight: "bold",
    },
    separator: {
      width: 1,
      height: "60%",
      alignSelf: "center",
      backgroundColor: "red",
    },
  });

export default TabSelector;