import React from 'react';
import { Tabs } from 'expo-router';
import { Platform } from 'react-native';
import Svg, { Path } from 'react-native-svg';

const HomeIcon = ({ color }: { color: string }) => (
    <Svg
        width="40"
        height="40"
        viewBox="0 0 40 40"
        fill={color}
        xmlns="http://www.w3.org/2000/svg"
    >
        <Path
            d="M7.5 31.6667V16.9231C7.5 16.4461 7.60671 15.9941 7.82012 15.5673C8.03354 15.1405 8.32854 14.789 8.70512 14.5129L18.1923 7.36546C18.7188 6.96374 19.3205 6.76288 19.9974 6.76288C20.6743 6.76288 21.2777 6.96374 21.8076 7.36546L31.2948 14.5129C31.6714 14.789 31.9664 15.1405 32.1798 15.5673C32.3932 15.9941 32.4999 16.4461 32.4999 16.9231V31.6667C32.4999 32.3483 32.2537 32.9353 31.7611 33.4278C31.2686 33.9204 30.6816 34.1666 30 34.1666H24.6794C24.2526 34.1666 23.8948 34.0223 23.6061 33.7335C23.3174 33.4448 23.173 33.087 23.173 32.6602V24.5192C23.173 24.0924 23.0287 23.7346 22.7399 23.4459C22.4512 23.1572 22.0934 23.0128 21.6666 23.0128H18.3333C17.9065 23.0128 17.5487 23.1572 17.26 23.4459C16.9712 23.7346 16.8269 24.0924 16.8269 24.5192V32.6602C16.8269 33.087 16.6825 33.4448 16.3938 33.7335C16.1051 34.0223 15.7473 34.1666 15.3205 34.1666H9.99996C9.31835 34.1666 8.73129 33.9204 8.23879 33.4278C7.74626 32.9353 7.5 32.3483 7.5 31.6667Z"
            fill={color}
        />
    </Svg>
);
const ChargingIcon = ({ color }: { color: string }) => (
    <Svg
        width="40"
        height="40"
        viewBox="0 0 40 40"
        fill={color}
        xmlns="http://www.w3.org/2000/svg"
    >
        <Path
            d="M27.564 31.5385H25.5576C25.267 31.5385 25.0507 31.4113 24.9086 31.157C24.7665 30.9028 24.7767 30.6475 24.9391 30.3912L28.4188 24.8941C28.5349 24.7404 28.6778 24.6859 28.8476 24.7308C29.0175 24.7757 29.1024 24.8999 29.1024 25.1034V28.4615H31.1088C31.3994 28.4615 31.6158 28.5887 31.7579 28.843C31.8999 29.0972 31.8898 29.3525 31.7274 29.6088L28.2476 35.1059C28.1316 35.2596 27.9887 35.3141 27.8188 35.2692C27.6489 35.2243 27.564 35.1001 27.564 34.8966V31.5385ZM13.9102 35.8333C13.4834 35.8333 13.1256 35.6889 12.8369 35.4002C12.5482 35.1114 12.4038 34.7537 12.4038 34.3269V8.57375C12.4038 8.14691 12.5482 7.78913 12.8369 7.50041C13.1256 7.21169 13.4834 7.06733 13.9102 7.06733H16.923V5.67312C16.923 5.24632 17.0673 4.88855 17.3561 4.59983C17.6448 4.31108 18.0026 4.1667 18.4294 4.1667H21.5704C21.9972 4.1667 22.355 4.31108 22.6437 4.59983C22.9324 4.88855 23.0768 5.24632 23.0768 5.67312V7.06733H26.0929C26.5202 7.06733 26.8775 7.21169 27.1649 7.50041C27.4523 7.78913 27.596 8.14691 27.596 8.57375V19.1955C27.596 19.4663 27.5036 19.7001 27.3188 19.897C27.1339 20.0939 26.9048 20.2201 26.6313 20.2757C25.5394 20.4573 24.5255 20.7991 23.5896 21.3013C22.6537 21.8034 21.8243 22.4359 21.1014 23.1987C20.2752 24.0705 19.6179 25.0812 19.1297 26.2308C18.6415 27.3803 18.3974 28.6207 18.3974 29.9519C18.3974 30.6822 18.4732 31.3882 18.6249 32.0698C18.7766 32.7514 19.0041 33.4087 19.3076 34.0416C19.4977 34.4711 19.4844 34.8771 19.2675 35.2595C19.0506 35.642 18.7274 35.8333 18.298 35.8333H13.9102Z"
            fill={color}
        />
    </Svg>
);
const AccountIcon = ({ color }: { color: string }) => (
    <Svg
        width="40"
        height="40"
        viewBox="0 0 40 40"
        xmlns="http://www.w3.org/2000/svg"
        fill={color}
    >
        <Path
            d="M20 19.4871C18.391 19.4871 17.0166 18.9172 15.8766 17.7772C14.7366 16.6373 14.1667 15.2628 14.1667 13.6539C14.1667 12.0449 14.7366 10.6704 15.8766 9.5305C17.0166 8.39056 18.391 7.82059 20 7.82059C21.6089 7.82059 22.9834 8.39056 24.1233 9.5305C25.2633 10.6704 25.8333 12.0449 25.8333 13.6539C25.8333 15.2628 25.2633 16.6373 24.1233 17.7772C22.9834 18.9172 21.6089 19.4871 20 19.4871ZM7.5 29.6474V28.4743C7.5 27.6581 7.72169 26.9023 8.16508 26.2068C8.60844 25.5113 9.20085 24.9765 9.94229 24.6026C11.5897 23.7949 13.2516 23.1891 14.9279 22.7853C16.6042 22.3815 18.2948 22.1795 20 22.1795C21.7051 22.1795 23.3958 22.3815 25.072 22.7853C26.7483 23.1891 28.4102 23.7949 30.0576 24.6026C30.7991 24.9765 31.3915 25.5113 31.8348 26.2068C32.2782 26.9023 32.4999 27.6581 32.4999 28.4743V29.6474C32.4999 30.3504 32.2537 30.9481 31.7611 31.4406C31.2686 31.9332 30.6709 32.1794 29.9679 32.1794H10.032C9.32903 32.1794 8.73129 31.9332 8.23879 31.4406C7.74626 30.9481 7.5 30.3504 7.5 29.6474Z"
            fill={color}
        />
    </Svg>
);

export default function TabLayout() {
    return (
        <Tabs
            screenOptions={{
                headerShown:false,
                tabBarLabelStyle: {
                    fontSize: 16,
                    marginBottom: Platform.OS === 'ios' ? 0 : 25
                },
                tabBarStyle: {
                    height: 100
                }
            }}
        >
            <Tabs.Screen
                name="index"
                options={{
                    title: '主頁',
                    tabBarIcon: ({ focused }) => (
                        <HomeIcon color={focused ? '#02677D' : '#BBBBBB'} />
                    )
                }}
            />
            <Tabs.Screen
                name="charging"
                options={{
                    title: '充電',
                    tabBarIcon: ({ focused }) => (
                        <ChargingIcon color={focused ? '#02677D' : '#BBBBBB'} />
                    )
                }}
            />
            <Tabs.Screen
                name="account"
                options={{
                    title: '帳戶',
                    tabBarIcon: ({ focused, color }) => (
                        <AccountIcon color={focused ? '#02677D' : '#BBBBBB'} />
                    )
                }}
            />
        </Tabs>
    );
}
