import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
import { Text, View, } from '../Themed';
import { TextInput } from 'react-native-gesture-handler';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';

const PolicyFooter = () => {
    return (
        <View style={styles.homePolicy}>
            <LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.bgLinearGradient}>
                <Text style={styles.homePolicyTitle}>
                    Chính sách bán hàng
            </Text>
            </LinearGradient>
            <View style={styles.homePolicyList}>
                <View style={styles.homePolicyItem}>
                    <FontAwesome style={styles.homePolicyIcon} name="truck" size={25} />
                    <View>
                        <Text style={styles.homePolicyTextSt}>CHÍNH SÁCH GIAO HÀNG</Text>
                        <Text style={styles.homePolicyTextNd}>Nhận hàng và thanh toán tại nhà</Text>
                    </View>
                </View>
                <View style={styles.homePolicyItem}>
                    <FontAwesome style={styles.homePolicyIcon} name="refresh" size={25} />
                    <View>
                        <Text style={styles.homePolicyTextSt}>ĐỔI TRẢ DỄ DÀNG</Text>
                        <Text style={styles.homePolicyTextNd}>Dùng thử trong vòng 3 ngày</Text>
                    </View>
                </View>
                <View style={styles.homePolicyItem}>
                    <FontAwesome style={styles.homePolicyIcon} name="credit-card" size={25} />
                    <View>
                        <Text style={styles.homePolicyTextSt}>THANH TOÁN TIỆN LỢI</Text>
                        <Text style={styles.homePolicyTextNd}>Trả tiền mặt, CK, trả góp 0%</Text>
                    </View>
                </View>
                <View style={styles.homePolicyItem}>
                    <FontAwesome style={styles.homePolicyIcon} name="comments-o" size={25} />
                    <View>
                        <Text style={styles.homePolicyTextSt}>HỖ TRỢ NHIỆT TÌNH</Text>
                        <Text style={styles.homePolicyTextNd}>Tư vấn, giải đáp mọi thắc mắc</Text>
                    </View>
                </View>
            </View>
        </View>
    );
}

const Social = () => {
    return (
        <View style={styles.homeSocial}>
            <LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.bgLinearGradient}>
                <Text style={styles.homePolicyTitle}>
                    Kết nối với chúng tôi
            </Text>
            </LinearGradient>
            <View style={styles.homeSocialList}>
                <View style={styles.homeSocialItem}>
                    <FontAwesome style={styles.homeSocialIconFace} name="facebook" size={25} />
                </View>
                <View style={styles.homeSocialItem}>
                    <FontAwesome style={styles.homeSocialIconYoutube} name="youtube-play" size={25} />
                </View>
                <View style={styles.homeSocialItem}>
                    <LinearGradient colors={['#f09433', '#e6683c', '#dc2743', '#cc2366', '#bc1888']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.homeSocialItemBg}>
                        <FontAwesome style={styles.homeSocialIconInsta} name="instagram" size={25} />
                    </LinearGradient>
                </View>
            </View>
        </View>
    );
}

const ShowroomList = () => {
    const [showFooter, setFooter] = useState('');

    const ShowroomData = [
        {
            id: 'id1',
            title: 'HANOICOMPUTER - HAI BÀ TRƯNG',
            address: '- 129+131 Lê Thanh Nghị - Đồng Tâm - Hai Bà Trưng - Hà Nội\n- Tel: (024) 36282024\n- Email: kinhdoanhle.lethanhnghi@hanoicomputer.com\n\n'
        },
        {
            id: 'id2',
            title: 'HANOICOMPUTER - ĐỐNG ĐA',
            address: '- 43 Thái Hà - Trung Liệt - Đống Đa - Hà Nội\n- Tel: 1900 1903 (máy lẻ 201) - (024) 35380088\n- Email: kinhdoanhle.thaiha@hanoicomputer.com\n\n'
        },
        {
            id: 'id3',
            title: 'HANOICOMPUTER - CẦU GIẤY',
            address: '- 79 Nguyễn Văn Huyên - Cầu Giấy - Hà Nội\n- Tel: 1900 1903 (máy lẻ 503) - (024) 38610088\n- Email: kinhdoanhle.caugiay@hanoicomputer.com\n\n'
        },
        {
            id: 'id4',
            title: 'HANOICOMPUTER - HÀ ĐÔNG',
            address: '- 511+513 Quang Trung - Hà Đông - Hà Nội\n- Tel: 1900 1903 (máy lẻ 600) - (024) 38580088\n- Email: kinhdoanhle.hadong@hanoicomputer.com\n\n'
        },
        {
            id: 'id5',
            title: 'HANOICOMPUTER - HẢI PHÒNG',
            address: '- A1-6 Lô 8A, Lê Hồng Phong, Quận Ngô Quyền, Hải Phòng\n- Tel: 1900 1903 (máy lẻ 301) - (022) 58830013\n- Email: kinhdoanhle.haiphong@hanoicomputer.com\n\n'
        },
        {
            id: 'id6',
            title: 'HANOICOMPUTER - TP. HỒ CHÍ MINH',
            address: '- 520 Cách Mạng Tháng Tám - Phường 11 - Quận 3 - TP. Hồ Chí Minh\n- Tel: 1900 1903 (máy lẻ 710) - (028) 73078877\n- Email: kd.hcmq3@hanoicomputer.com\n\n'
        },
        {
            id: 'id7',
            title: 'HANOICOMPUTER - LONG BIÊN',
            address: '- Số 398 Nguyễn Văn Cừ - Long Biên - Hà Nội\n- Tel: 19001903 (máy lẻ 808) - (024) 73088877\n- Email: kinhdoanh.longbien@hanoicomputer.com\n\n'
        },
        {
            id: 'id8',
            title: 'PHÒNG CAMERA & TB AN NINH',
            address: '- 43 Thái Hà - Trung Liệt - Đống Đa - Hà Nội\n- Phụ trách: Anh Nguyễn Văn Hiển\n- Mobile: 096.411.0606\n- Email: hiennv@hanoicomputer.com\n\n'
        },
        {
            id: 'id9',
            title: 'PHÒNG BÁN HÀNG DỰ ÁN',
            address: '- 129 + 131 Lê Thanh Nghị, Đồng Tâm, Hai Bà Trưng, Hà Nội\n- Tel: 0913.226.335\n- Email: diepnm@hanoicomputer.com\n\n'
        },
        {
            id: 'id10',
            title: 'PHÒNG BÁN HÀNG TRỰC TUYẾN',
            address: '- 129 + 131 Lê Thanh Nghị, Đồng Tâm, Hai Bà Trưng, Hà Nội\n- Tel: 098.33033.90 / 096.266.0316\n- Email: thuydb@hanoicomputer.com\n\n'
        },
    ];

    return (
        <View style={styles.homeShowrrom}>
            <LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.bgLinearGradient}>
                <Text style={styles.homePolicyTitle}>
                    Hệ thông showroom
          </Text>
            </LinearGradient>
            <View style={styles.homeShowrromList}>

                {
                    ShowroomData.map(item => <ShowroomOneItem key={item.id}
                        title={item.title} id={item.id} setFooter={setFooter} address={item.address} current_show_id={showFooter} />)
                }
            </View>
        </View>
    );
}

const ShowroomOneItem = (props: { id: string, current_show_id: string, title: string, address: string, setFooter: (id: string) => void }) => {

    const { id, current_show_id, title, address, setFooter } = props;

    return (
        <View style={styles.homeShowrromItem}>
            <TouchableOpacity onPress={() => setFooter(id)} style={styles.homeShowrromItemTitle}>
                <Text style={styles.homeShowrromItemTitleText}>{title}</Text>
                <Text style={styles.homeShowrromItemTitleIcon}>{current_show_id == id ? '-' : '+'}</Text>
            </TouchableOpacity>
            <View style={current_show_id == id ? styles.homeShowrromItemContentHienThi : styles.homeShowrromItemContent}>
                <Text>
                    {address}
                    <TouchableOpacity onPress={() => Alert.alert('Go to map')} style={styles.homeShowrromItemContentMap}>
                        <Text style={styles.homeShowrromItemContentMapText}>- Xem bản đồ</Text>
                    </TouchableOpacity>
                </Text>
            </View>
        </View>
    );
}

const FooterInfo = () => {
    return (
        <View style={styles.footer}>
            <Text style={styles.footerBold}>© 2020 Công Ty Cổ Phần Máy Tính Hà Nội</Text>
            <Text style={styles.footerText}>
                Địa chỉ: Số 129 + 131, phố Lê Thanh Nghị, Phường Đồng Tâm, Quận Hai Bà Trưng, Hà Nội{'\n'}{'\n'}
          GPĐKKD số 0101161194 do Sở KHĐT Tp.Hà Nội cấp ngày 31/8/2001{'\n'}{'\n'}
          Email: hnc@hanoicomputer.com. Điện thoại: 1900 1903
          </Text>
        </View>
    );
}

export { PolicyFooter, Social, ShowroomList, FooterInfo }

let winWidth = Dimensions.get('window').width; //full width
let winHeight = Dimensions.get('window').height; //full height

const styles = StyleSheet.create({
    bgLinearGradient: {
        marginBottom: 20,
        borderRadius: 5,
        overflow: 'hidden',
    },
    homePolicy: {
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
    },
    homePolicyTitle: {
        width: '100%',
        fontSize: 15,
        paddingLeft: 10,
        paddingRight: 10,
        borderRadius: 3,
        lineHeight: 40,
        textTransform: 'uppercase',
        fontWeight: '700',
        color: '#fff',
        overflow: 'hidden',
    },
    homePolicyList: {
        paddingTop: 10,
        paddingBottom: 10,
    },
    homePolicyItem: {
        marginBottom: 10,
        display: 'flex',
        flexDirection: 'row',
        padding: 10,
        borderWidth: 1,
        borderColor: '#d9d9d9',
        borderRadius: 5,
        alignItems: 'center',
    },
    homePolicyIcon: {
        width: 50,
        height: 50,
        textAlign: 'center',
        lineHeight: 50,
        borderRadius: 25,
        backgroundColor: '#2b3179',
        color: '#fff',
        fontSize: 23,
        overflow: 'hidden',
        marginRight: 10.
    },
    homePolicyTextSt: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 5,
    },
    homePolicyTextNd: {
        fontSize: 13,
    },
    homeSocial: {
        marginBottom: 20,
        paddingLeft: 10,
        paddingRight: 10,
    },
    homeSocialList: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    homeSocialItem: {
        marginRight: 10,
    },
    homeSocialIconFace: {
        width: 50,
        height: 50,
        textAlign: 'center',
        lineHeight: 50,
        borderRadius: 25,
        backgroundColor: '#2b3179',
        color: '#fff',
        fontSize: 23,
        overflow: 'hidden',
    },
    homeSocialIconYoutube: {
        width: 50,
        height: 50,
        textAlign: 'center',
        lineHeight: 50,
        borderRadius: 25,
        backgroundColor: '#ff0000',
        color: '#fff',
        fontSize: 23,
        overflow: 'hidden',
    },
    homeSocialIconInsta: {
        width: 50,
        height: 50,
        textAlign: 'center',
        lineHeight: 50,
        borderRadius: 25,
        color: '#fff',
        fontSize: 23,
        overflow: 'hidden',
    },
    homeSocialItemBg: {
        width: 50,
        height: 50,
        textAlign: 'center',
        lineHeight: 50,
        borderRadius: 25,
        color: '#fff',
        fontSize: 23,
        overflow: 'hidden',
    },
    homeShowrrom: {
        paddingLeft: 10,
        paddingRight: 10,
        marginBottom: 20,
    },
    homeShowrromList: {
        borderWidth: 1,
        borderRadius: 5,
        borderColor: '#d9d9d9',
        overflow: 'hidden',
    },
    homeShowrromItem: {

    },
    homeShowrromItemTitle: {
        position: 'relative',
        backgroundColor: '#fff',
        paddingLeft: 10,
        paddingRight: 10,
        borderColor: '#d9d9d9',
        borderBottomWidth: 1,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    homeShowrromItemTitleText: {
        color: '#333',
        lineHeight: 40,
        fontSize: 16,
        fontWeight: 'bold',
    },
    homeShowrromItemTitleIcon: {
        color: '#333',
        lineHeight: 40,
        fontSize: 16,
    },
    homeShowrromItemContent: {
        padding: 10,
        fontSize: 12,
        borderColor: '#d9d9d9',
        borderBottomWidth: 1,
        overflow: 'hidden',
        display: 'none',
    },
    homeShowrromItemContentHienThi: {
        padding: 10,
        fontSize: 12,
        borderColor: '#d9d9d9',
        borderBottomWidth: 1,
    },
    homeShowrromItemContentMap: {},
    homeShowrromItemContentMapText: {
        color: '#0063C3'
    },
    footer: {
        paddingLeft: 10,
        paddingRight: 10,
    },
    footerBold: {
        textAlign: 'center',
        fontSize: 14,
        fontWeight: 'bold',
    },
    footerText: {
        textAlign: 'center',
        fontSize: 14,
    },
})