import { Tabs } from 'expo-router';
import React from 'react';
import { Platform, View, Image, StyleSheet } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

const icon_tab1_s = require('@/assets/images/tab/icon_tab1_s.png');
const icon_tab1_u = require('@/assets/images/tab/icon_tab1_u.png');
const icon_tab2_s = require('@/assets/images/tab/icon_tab2_s.png');
const icon_tab2_u = require('@/assets/images/tab/icon_tab2_u.png');
const icon_tab3_s = require('@/assets/images/tab/icon_tab3_s.png');
const icon_tab3_u = require('@/assets/images/tab/icon_tab3_u.png');
const icon_tab4_s = require('@/assets/images/tab/icon_tab4_s.png');
const icon_tab4_u = require('@/assets/images/tab/icon_tab4_u.png');

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: true,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: 'absolute',
          },
          default: {},
        }),
      }}>
      <Tabs.Screen
        name="(home)"
        options={{
          title: '测量',
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <Image style={styles.tabIcon} source={focused ? icon_tab1_s : icon_tab1_u} />
          ),
        }}
      />
      <Tabs.Screen
        name="setting"
        options={{
          title: '设置',
          tabBarIcon: ({ focused }) => (
            <Image style={styles.tabIcon} source={focused ? icon_tab2_s : icon_tab2_u} />
          ),
        }}
      />
      <Tabs.Screen
        name="ble"
        options={{
          title: '蓝牙',
          tabBarIcon: ({ focused }) => (
            <Image style={styles.tabIcon} source={focused ? icon_tab3_s : icon_tab3_u} />
          ),
        }}
      />
      <Tabs.Screen
        name="mine"
        options={{
          title: '我的',
          tabBarIcon: ({ focused }) => (
            <Image style={styles.tabIcon} source={focused ? icon_tab4_s : icon_tab4_u} />
          ),
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  tabIcon: {
    width: 24,
    height: 24,
  },
});