import { View, Text, ScrollView } from 'react-native';
import NormalButton from '../global/normal_button';
import Svg, { Path } from 'react-native-svg';
import NormalInput from '../global/normal_input';
interface HomePageProps {}

const HomeIconSvg = () => (
    <Svg width="120" height="120" viewBox="0 0 120 120" fill="none">
        <Path
            d="M68.4287 52.585H82.53C83.8443 52.585 84.827 53.7975 84.551 55.0811C82.1637 66.1687 72.2969 74.481 60.4856 74.4828C47.0891 74.4845 36.0538 63.6258 35.8646 50.2415C35.6701 36.493 46.7662 25.2874 60.4821 25.2874C72.2934 25.2874 82.1602 33.5962 84.5492 44.6821C84.827 45.9692 83.8478 47.1851 82.53 47.1851H70.6284H62.51C61.9058 47.1851 61.47 46.6058 61.6401 46.0264L65.6073 32.4808C65.8921 31.5094 64.6108 30.8745 64.01 31.6881L49.61 51.1418C49.1673 51.7385 49.5944 52.585 50.3392 52.585H58.4577C59.0619 52.585 59.4977 53.1643 59.3275 53.7437L55.3603 67.2893C55.0756 68.2607 56.3569 68.8956 56.9594 68.082L68.4321 52.5832L68.4287 52.585Z"
            fill="#02677D"
        />
        <Path
            d="M89.9883 55.0632C87.6996 69.0033 75.7914 79.7031 61.3079 80.112C43.8684 80.6049 29.5964 65.9342 30.552 48.5074C31.4169 32.7409 44.4694 20.2217 60.4466 20.2217C75.3109 20.2217 87.6454 31.0595 89.9865 45.267C90.1944 46.5272 91.2829 47.4535 92.56 47.4535C94.1743 47.4535 95.399 46.0046 95.137 44.4106C91.9939 25.3269 73.4957 11.4217 52.7576 15.8156C39.4745 18.6295 29.0024 29.0513 26.1354 42.3273C21.2016 65.1722 38.4699 85.3448 60.4466 85.3448C77.8966 85.3448 92.3783 72.6282 95.1335 55.9528C95.3973 54.3536 94.1813 52.8925 92.5618 52.8925C91.2916 52.8925 90.1962 53.8066 89.99 55.0615L89.9883 55.0632Z"
            fill="#02677D"
        />
        <Path
            d="M14.0784 99.5391C14.0784 100.758 15.0549 101.751 16.2581 101.751H19.6426V102.976H16.2581C14.3888 102.976 12.8735 101.438 12.8735 99.5409C12.8735 97.6437 14.3888 96.1059 16.2581 96.1059H19.6426V97.3305H16.2581C15.0566 97.3305 14.0784 98.3215 14.0784 99.5426V99.5391Z"
            fill="#02677D"
        />
        <Path
            d="M27.0517 101.748L27.6672 102.976H26.3123L25.6933 101.748L25.0464 100.46L25.0168 100.405C24.8075 100.054 24.4257 99.8172 23.988 99.8172H22.7813V102.976H21.5747V96.1043H25.8468C26.3542 96.1043 26.8076 96.3132 27.1371 96.6476C27.4667 96.9857 27.6724 97.4511 27.6724 97.9608C27.6724 98.7111 27.2348 99.3606 26.6035 99.6508C26.4379 99.7287 26.2618 99.7818 26.0769 99.8013L27.0534 101.748H27.0517ZM25.8468 98.5943C25.9357 98.5943 26.0194 98.5784 26.0996 98.5377C26.3245 98.435 26.4658 98.2121 26.4658 97.9625C26.4658 97.7378 26.349 97.5838 26.281 97.5095C26.2007 97.4316 26.0595 97.3308 25.8468 97.3308H22.7831V98.5961H25.8468V98.5943Z"
            fill="#02677D"
        />
        <Path
            d="M36.1259 102.976H34.771L34.152 101.748L32.6768 98.8067L31.2017 101.748L30.5826 102.976H29.2278L29.8433 101.748L32.6786 96.1043L35.5138 101.748L36.1294 102.976H36.1259Z"
            fill="#02677D"
        />
        <Path
            d="M44.4502 101.744V102.969H39.2191L39.2104 102.981H37.6864L37.6951 102.969L38.628 101.744L40.2933 99.5535L41.057 98.5536L41.9812 97.3378H37.6794V96.1097H42.914L42.9175 96.1061H44.438V96.1097L43.5017 97.3378L41.8173 99.5535L41.057 100.553L40.152 101.744H44.4502Z"
            fill="#02677D"
        />
        <Path
            d="M52.7729 96.0919V96.0955L50.1521 99.5393L50.1486 99.5429L50.0039 99.7305V102.971H48.7938V99.7517L48.6333 99.5429L48.6299 99.5393L46.0091 96.0919H47.5331L49.3953 98.5394L51.2559 96.0919H52.7764H52.7729ZM46.0073 102.967H46.023L46.0073 102.989V102.967ZM52.7624 102.967H52.7746V102.983L52.7624 102.967Z"
            fill="#02677D"
        />
        <Path
            d="M59.4861 99.5394C59.4861 100.759 60.4626 101.751 61.6658 101.751H65.0503V102.976H61.6658C59.7965 102.976 58.2812 101.438 58.2812 99.5411C58.2812 97.644 59.7965 96.1061 61.6658 96.1061H65.0503V97.3308H61.6658C60.4644 97.3308 59.4861 98.3218 59.4861 99.5429V99.5394Z"
            fill="#02677D"
        />
        <Path
            d="M73.7514 96.1061V102.974H72.5448V99.8225H68.1925V102.973H66.9858V96.1043H68.1925V98.5979H72.5448V96.1061H73.7514Z"
            fill="#02677D"
        />
        <Path
            d="M82.2118 102.976H80.8569L80.2379 101.748L78.7628 98.8067L77.2876 101.748L76.6686 102.976H75.3137L75.9292 101.748L78.7645 96.1043L81.5998 101.748L82.2153 102.976H82.2118Z"
            fill="#02677D"
        />
        <Path
            d="M89.2406 101.748L89.8562 102.976H88.5013L87.8823 101.748L87.2354 100.46L87.2057 100.405C86.9965 100.054 86.6146 99.8172 86.177 99.8172H84.9703V102.976H83.7637V96.1043H88.0357C88.5432 96.1043 88.9965 96.3132 89.3261 96.6476C89.6556 96.9857 89.8614 97.4511 89.8614 97.9608C89.8614 98.7111 89.4237 99.3606 88.7925 99.6508C88.6269 99.7287 88.4507 99.7818 88.2659 99.8013L89.2424 101.748H89.2406ZM88.0357 98.5943C88.1247 98.5943 88.2084 98.5784 88.2886 98.5377C88.5135 98.435 88.6548 98.2121 88.6548 97.9625C88.6548 97.7378 88.5379 97.5838 88.4699 97.5095C88.3897 97.4316 88.2485 97.3308 88.0357 97.3308H84.9721V98.5961H88.0357V98.5943Z"
            fill="#02677D"
        />
        <Path
            d="M92.9984 99.5394C92.9984 100.759 93.9748 101.751 95.178 101.751H97.3559V100.435H95.178V99.2102H98.5625V102.976H95.178C93.3087 102.976 91.7935 101.438 91.7935 99.5411C91.7935 97.644 93.3087 96.1061 95.178 96.1061H98.5625V97.3308H95.178C93.9766 97.3308 92.9984 98.3218 92.9984 99.5429V99.5394Z"
            fill="#02677D"
        />
        <Path
            d="M102.025 97.9608V98.5979H106.38V99.8225H102.025V101.12C102.025 101.467 102.303 101.751 102.644 101.751H107.586V102.976H102.644C101.635 102.976 100.819 102.144 100.819 101.12V97.9608C100.819 96.9361 101.635 96.1043 102.644 96.1043H107.586V97.329H102.644C102.303 97.329 102.025 97.6139 102.025 97.9608Z"
            fill="#02677D"
        />
    </Svg>
);

const BellIconSvg = () => (
    <Svg width="20" height="26" viewBox="0 0 20 26" fill="none">
        <Path
            d="M1 22.1795C0.716667 22.1795 0.479167 22.0836 0.2875 21.8919C0.0958333 21.7001 0 21.4625 0 21.1791C0 20.8956 0.0958333 20.6582 0.2875 20.4667C0.479167 20.2753 0.716667 20.1795 1 20.1795H2.41027V10.2308C2.41027 8.43762 2.96368 6.85215 4.0705 5.47438C5.17734 4.0966 6.59829 3.21541 8.33333 2.83081V2.00004C8.33333 1.53709 8.49522 1.14358 8.819 0.819509C9.14278 0.49542 9.53593 0.333374 9.99847 0.333374C10.461 0.333374 10.8547 0.49542 11.1794 0.819509C11.5042 1.14358 11.6666 1.53709 11.6666 2.00004V2.83081C13.4016 3.21541 14.8226 4.0966 15.9294 5.47438C17.0363 6.85215 17.5897 8.43762 17.5897 10.2308V20.1795H18.9999C19.2833 20.1795 19.5208 20.2754 19.7124 20.4671C19.9041 20.6589 19.9999 20.8965 19.9999 21.1799C19.9999 21.4634 19.9041 21.7009 19.7124 21.8923C19.5208 22.0838 19.2833 22.1795 18.9999 22.1795H1ZM9.9977 25.923C9.33426 25.923 8.76707 25.687 8.29613 25.215C7.8252 24.743 7.58973 24.1756 7.58973 23.5128H12.4102C12.4102 24.1778 12.174 24.7457 11.7015 25.2166C11.2291 25.6876 10.6611 25.923 9.9977 25.923ZM4.4102 20.1795H15.5897V10.2308C15.5897 8.68717 15.044 7.36965 13.9525 6.27821C12.8611 5.18674 11.5436 4.64101 9.99997 4.64101C8.45637 4.64101 7.13884 5.18674 6.0474 6.27821C4.95593 7.36965 4.4102 8.68717 4.4102 10.2308V20.1795Z"
            fill="#888888"
        />
    </Svg>
);

const BookingIconSvg = () => (
    <Svg width="30" height="30" viewBox="0 0 30 30" fill="none">
        <Path
            d="M15 30C11.1667 30 7.82639 28.7292 4.97917 26.1875C2.13194 23.6458 0.5 20.4722 0.0833333 16.6667H3.5C3.88889 19.5556 5.17361 21.9444 7.35417 23.8333C9.53472 25.7222 12.0833 26.6667 15 26.6667C18.25 26.6667 21.0069 25.5347 23.2708 23.2708C25.5347 21.0069 26.6667 18.25 26.6667 15C26.6667 11.75 25.5347 8.99306 23.2708 6.72917C21.0069 4.46528 18.25 3.33333 15 3.33333C13.0833 3.33333 11.2917 3.77778 9.625 4.66667C7.95833 5.55556 6.55556 6.77778 5.41667 8.33333H10V11.6667H0V1.66667H3.33333V5.58333C4.75 3.80556 6.47917 2.43056 8.52083 1.45833C10.5625 0.486111 12.7222 0 15 0C17.0833 0 19.0347 0.395833 20.8542 1.1875C22.6736 1.97917 24.2569 3.04861 25.6042 4.39583C26.9514 5.74306 28.0208 7.32639 28.8125 9.14583C29.6042 10.9653 30 12.9167 30 15C30 17.0833 29.6042 19.0347 28.8125 20.8542C28.0208 22.6736 26.9514 24.2569 25.6042 25.6042C24.2569 26.9514 22.6736 28.0208 20.8542 28.8125C19.0347 29.6042 17.0833 30 15 30ZM19.6667 22L13.3333 15.6667V6.66667H16.6667V14.3333L22 19.6667L19.6667 22Z"
            fill="#02677D"
        />
    </Svg>
);
const HomePage: React.FC<HomePageProps> = () => {
    return (
        <View className="bg-[#ffffff] flex-1 px-[5%] pt-[70px]">
            <View className="basis-1/3">
                <View className="flex-row items-center pb-8">
                    <HomeIconSvg />
                    <View className="pl-2 flex-1 flex-column ">
                        <View className="flex-row justify-between">
                            <Text className="text-lg pb-1">你好！</Text>
                            <BellIconSvg />
                        </View>
                        <Text className="text-4xl font-light ">Mike Chan</Text>
                    </View>
                </View>
                <NormalInput
                    placeholder="搜尋充電站或地區"
                    onChangeText={() => console.log('abc')}
                />
            </View>
            <View className="basis-1/3 mt-[-35] pb-6 flex-column">
                <View>
                    <Text
                        style={{
                            fontWeight: 400,
                            fontSize: 16,
                            color: '#222222',
                            marginBottom: '5%'
                        }}
                    >
                        近期預約過
                    </Text>
                    <ScrollView>
                        <View style={styles.recentBookingRowContainer}>
                            <BookingIconSvg />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    flex: 1,
                                    borderBottomWidth: 0.5,
                                    paddingVertical: 15,
                                    borderColor: '#ccc',
                                    borderRadius: 8
                                }}
                            >
                                <View
                                    style={{
                                        marginLeft: 15,
                                        gap: 3
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#222222'
                                        }}
                                    >
                                        充電站#1
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#888888'
                                        }}
                                    >
                                        充電站地址#1
                                    </Text>
                                </View>
                                <NormalButton
                                    title={
                                        <Text style={{ color: '#061E25' }}>
                                            重新預約
                                        </Text>
                                    }
                                    onPress={() => console.log('abc')}
                                    buttonPressedStyle={{
                                        backgroundColor: '#CFDEE4'
                                    }}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        paddingHorizontal: 25,
                                        paddingVertical: 1,
                                        borderRadius: 8
                                    }}
                                />
                            </View>
                        </View>
                        <View style={styles.recentBookingRowContainer}>
                            <BookingIconSvg />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    flex: 1,
                                    borderBottomWidth: 0.5,
                                    paddingVertical: 15,
                                    borderColor: '#ccc',
                                    borderRadius: 8
                                }}
                            >
                                <View
                                    style={{
                                        marginLeft: 15,
                                        gap: 3
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#222222'
                                        }}
                                    >
                                        充電站#2
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#888888'
                                        }}
                                    >
                                        充電站地址#2
                                    </Text>
                                </View>
                                <NormalButton
                                    title={
                                        <Text style={{ color: '#061E25' }}>
                                            重新預約
                                        </Text>
                                    }
                                    onPress={() => console.log('abc')}
                                    buttonPressedStyle={{
                                        backgroundColor: '#CFDEE4'
                                    }}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        paddingHorizontal: 25,
                                        paddingVertical: 1,
                                        borderRadius: 8
                                    }}
                                />
                            </View>
                        </View>
                        <View style={styles.recentBookingRowContainer}>
                            <BookingIconSvg />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    flex: 1,
                                    borderBottomWidth: 0.5,
                                    paddingVertical: 15,
                                    borderColor: '#ccc',
                                    borderRadius: 8
                                }}
                            >
                                <View
                                    style={{
                                        marginLeft: 15,
                                        gap: 3
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#222222'
                                        }}
                                    >
                                        充電站#3
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#888888'
                                        }}
                                    >
                                        充電站地址#3
                                    </Text>
                                </View>
                                <NormalButton
                                    title={
                                        <Text style={{ color: '#061E25' }}>
                                            重新預約
                                        </Text>
                                    }
                                    onPress={() => console.log('abc')}
                                    buttonPressedStyle={{
                                        backgroundColor: '#CFDEE4'
                                    }}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        paddingHorizontal: 25,
                                        paddingVertical: 1,
                                        borderRadius: 8
                                    }}
                                />
                            </View>
                        </View>
                        <View className="flex-row items-center">
                            <BookingIconSvg />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    flex: 1,
                                    borderBottomWidth: 0.5,
                                    paddingVertical: 15,
                                    borderColor: '#ccc',
                                    borderRadius: 8
                                }}
                            >
                                <View
                                    style={{
                                        marginLeft: 15,
                                        gap: 3
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#222222'
                                        }}
                                    >
                                        充電站#4
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#888888'
                                        }}
                                    >
                                        充電站地址#4
                                    </Text>
                                </View>
                                <NormalButton
                                    title={
                                        <Text style={{ color: '#061E25' }}>
                                            重新預約
                                        </Text>
                                    }
                                    onPress={() => console.log('abc')}
                                    buttonPressedStyle={{
                                        backgroundColor: '#CFDEE4'
                                    }}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        paddingHorizontal: 25,
                                        paddingVertical: 1,
                                        borderRadius: 8
                                    }}
                                />
                            </View>
                        </View>
                    </ScrollView>
                </View>
            </View>
            <View className="basis-1/3">
                <View className="mt-6 mb-4">
                    <NormalButton
                        onPress={() => console.log('掃瞄及充電')}
                        title={
                            <Text className="text-white font-bold text-lg">
                                掃瞄及充電
                            </Text>
                        }
                        extendedStyle={{
                            alignItems: 'flex-start',
                            padding: 24
                        }}
                    />
                </View>
                <View className="flex-1 flex-row justify-between gap-6">
                    <View className="flex-1">
                        <NormalButton
                            onPress={() => console.log('我的預約')}
                            title={
                                <Text className="text-white font-bold text-lg">
                                    我的預約
                                </Text>
                            }
                            extendedStyle={{
                                alignItems: 'flex-start',
                                padding: 24
                            }}
                        />
                    </View>
                    <View className="flex-1">
                        <NormalButton
                            onPress={() => console.log('我的車輛')}
                            title={
                                <Text className="text-white font-bold text-lg">
                                    我的車輛
                                </Text>
                            }
                            extendedStyle={{
                                alignItems: 'flex-start',
                                padding: 24
                            }}
                        />
                    </View>
                </View>
            </View>
        </View>
    );
};
export default HomePage;
