import {
  TabList,
  TabListProps,
  Tabs,
  TabSlot,
  TabTrigger,
  TabTriggerSlotProps,
} from 'expo-router/ui';
import React from 'react';
import { Pressable, StyleSheet, View } from 'react-native';

import { ThemedText } from './themed-text';
import { ThemedView } from './themed-view';

import { MaxContentWidth, Spacing } from '@/constants/theme';
import { Image, ImageSource } from 'expo-image';

import antdDefaultTheme from '@ant-design/react-native/lib/style/themes/default';


export default function AppTabs() {
  return (
    <Tabs>
      <TabSlot detachInactiveScreens style={{ height: '100%', paddingBottom: 44 }} />
      <TabList asChild>
        <CustomTabList>
          <TabTrigger name="home" href="/" asChild>
            <TabButton icon={require("@/assets/images/tabIcons/home.png")}>首页</TabButton>
          </TabTrigger>
          <TabTrigger name="customer" href="/customer" asChild>
            <TabButton  icon={require("@/assets/images/tabIcons/explore.png")}>客户</TabButton>
          </TabTrigger>
          <TabTrigger name="analytics" href="/analytics" asChild>
            <TabButton icon={require("@/assets/images/tabIcons/explore.png")}>统计</TabButton>
          </TabTrigger>
          <TabTrigger name="reports" href="/reports" asChild>
            <TabButton icon={require("@/assets/images/tabIcons/explore.png")}>分析</TabButton>
          </TabTrigger>
          <TabTrigger name="profile" href="/profile" asChild>
            <TabButton icon={require("@/assets/images/tabIcons/home.png")}>我的</TabButton>
          </TabTrigger>
        </CustomTabList>
      </TabList>
    </Tabs>
  );
}

export function TabButton({ children, isFocused, icon, ...props }: TabTriggerSlotProps & {icon: ImageSource}) {
  return (
    <Pressable {...props} style={({ pressed }) => pressed && styles.pressed}>
      <ThemedView
        type={'backgroundElement'}
        style={styles.tabButtonView}>
          <Image tintColor={isFocused ? antdDefaultTheme.brand_primary : undefined} className="w-6 h-6 mb-1 self-center " source={icon} />
        <ThemedText type="small" style={{color: isFocused ? antdDefaultTheme.brand_primary : undefined}}>
          {children}
        </ThemedText>
      </ThemedView>
    </Pressable>
  );
}

export function CustomTabList(props: TabListProps) {
  // const scheme = "light"


  return (
    <View {...props} style={styles.tabListContainer}>
      <ThemedView type="backgroundElement" style={styles.innerContainer}>
        

        {props.children}

        
      </ThemedView>
    </View>
  );
}

const styles = StyleSheet.create({
  tabListContainer: {
    position: 'absolute',
    width: '100%',
    padding: Spacing.three,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    bottom: 0,
  },
  innerContainer: {
    paddingVertical: Spacing.two,
    paddingHorizontal: Spacing.five,
    borderRadius: Spacing.five,
    flexDirection: 'row',
    alignItems: 'center',
    flexGrow: 1,
    gap: Spacing.two,
    maxWidth: MaxContentWidth,
  },
  brandText: {
    marginRight: 'auto',
  },
  pressed: {
    opacity: 0.7,
  },
  tabButtonView: {
    paddingVertical: Spacing.one,
    paddingHorizontal: Spacing.three,
    borderRadius: Spacing.half,
    display: 'flex',
    flexDirection: "column",
    justifyContent: "center",
    alignContent: "center",
  },
  externalPressable: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    gap: Spacing.one,
    marginLeft: Spacing.three,
  },
});
