import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import Swiper from 'react-native-swiper';
import styled from 'styled-components';
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
import { ShowProductItem } from '../components/product/productItem';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import { useNavigation } from '@react-navigation/native';

var winWidth = Dimensions.get('window').width; //full width
var winHeight = Dimensions.get('window').height; //full height
const ratio = winWidth / 930; //541 is actual image width
import { Header, MainSeach } from '../components/header/headerMain';

export default function TabOneScreen() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <SliderHome />

                <CateHome />

                <ShowProductList />
                <ShowProductList />

                <PolicyFooter />

                <Social />

                <ShowroomList />

                <FooterInfo />
            </ScrollView>
        </SafeAreaView>

    );
}





const SliderHome = () => {

    const imageSlider = [
        'https://hanoicomputercdn.com/media/banner/04_Feb6a20714a3495fa80e985095a9a548f98.png',
        'https://hanoicomputercdn.com/media/banner/19_Febbc8b55d8c3a6be385d8523c79eb4c8da.jpg',
        'https://hanoicomputercdn.com/media/banner/25_Feb8a3b5d706fea215ed9004c6ad5ea9065.png'
    ]

    return (
        <View style={styles.slider}>
            <Swiper style={styles.sliderSwipper} autoplay={true} showsButtons={false} index={3000} showsPagination={false}>
                {
                    imageSlider.map((item, index) => {
                        return (<Image style={styles.imgSlider} key={index} source={{ uri: item }} />);
                    })
                }
            </Swiper>
        </View>
    );
}

const CateHome = () => {
    const navigation = useNavigation();
    return (
        <View style={styles.catHomepage}>
            <TouchableOpacity onPress={() => navigation.navigate('productlist')} style={styles.catHomepageItem}>
                <Ionicons style={styles.catHomepageIcon} name="list-outline" size={28} />
                <Text style={styles.catHomepageText}>Danh mục sản phẩm</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate('productlist')} style={styles.catHomepageItem}>
                <Ionicons style={styles.catHomepageIcon} name="pricetags-outline" size={28} />
                <Text style={styles.catHomepageText}>Chương trình khuyến mại</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate('productlist')} style={styles.catHomepageItem}>
                <Ionicons style={styles.catHomepageIcon} name="search-outline" size={28} />
                <Text style={styles.catHomepageText}>Sản phẩm vừa xem</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate('buildpc')} style={styles.catHomepageItem}>
                <Ionicons style={styles.catHomepageIcon} name="build-outline" size={28} />
                <Text style={styles.catHomepageText}>Xây dựng cấu hình</Text>
            </TouchableOpacity>
        </View>
    );
}

const ShowProductList = () => {

    const itemProductHomeStyle = {
        width: 180,
        borderRadius: 5,
        margin: 5,
        borderWidth: 1,
        borderColor: '#e8e8e8',
    }
    const productData = [
        {
            id: 1,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 30000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 2,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 25000000,
            marketPrice: 50000000,
            quantity: 0,
        },
        {
            id: 3,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 35000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 4,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 40000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 5,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 30000000,
            marketPrice: 50000000,
            quantity: 1,
        },
    ]

    return (
        <View style={styles.bloxProductHome}>
            <Text style={styles.titleProductHome}>Lap top, máy tính xách tay</Text>
            <View style={styles.listProductHomeBao}>
                <ScrollView horizontal={true} style={styles.listProductHome}>
                    {
                        productData.map(item => <ShowProductItem key={item.id} id={item.id} productName={item.productName}
                            productSKU={item.productSKU} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductHomeStyle}
                        />)
                    }
                </ScrollView>
            </View>
        </View>
    )
}




const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    slider: {
        width: winWidth,
        marginBottom: 20,
        height: ratio * 430,
    },
    sliderSwipper: {
    },
    imgSlider: {
        width: winWidth,
        height: 430 * ratio,
    },
    catHomepage: {
        width: winWidth,
        marginBottom: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    catHomepageItem: {
        width: winWidth / 4,
        padding: 10,
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center',
    },
    catHomepageIcon: {
        width: 48,
        height: 48,
        backgroundColor: '#2b3179',
        textAlign: 'center',
        lineHeight: 48,
        borderRadius: 24,
        overflow: 'hidden',
        color: '#fff',
        marginBottom: 5,
    },
    catHomepageText: {
        fontSize: 12,
        textAlign: 'center',
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#ff00cc',
    },
    bloxProductHome: {
        width: winWidth,
        marginBottom: 20,
        padding: 10,
    },
    titleProductHome: {
        backgroundColor: '#243a76',
        fontSize: 15,
        paddingLeft: 10,
        paddingRight: 10,
        borderRadius: 3,
        lineHeight: 40,
        marginBottom: 5,
        textTransform: 'uppercase',
        fontWeight: '700',
        color: '#fff',
        overflow: 'hidden',
    },
    listProductHomeBao: {
        overflow: 'hidden',
    },
    listProductHome: {
        marginRight: -5,
        marginLeft: -5,
    },
});