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

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import { TextInput } from 'react-native-gesture-handler';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';
import { ArticleItem } from '../components/article/ArticleItem';

export default function ArticleHome() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <View style={styles.brecrumb}>
                    <Text style={styles.brecrumbText}>Trang chủ</Text>
                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
                    <Text style={styles.brecrumbTextLast}>Tin tức</Text>
                </View>

                <ArticleHomeNewFirstBlock />

                <ArticleNewHome />

                <ArticleHot />

                <ArticleListHome />

                <PolicyFooter />

                <Social />

                <ShowroomList />

                <FooterInfo />
            </ScrollView>
        </SafeAreaView>
    )
}

const dataArticle = [
    {
        id: 1,
        title: 'Chương trình Khuyến mãi “Play-with Power by MSI”',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '12-03-2021, 5:30 pm',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 2,
        title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '13-03-2021, 8:30 pm',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 3,
        title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '13-03-2021, 5:30 am',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 4,
        title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '22-03-2021, 5:30 pm',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
]

const ArticleHomeNewFirstBlock = () => {
    const dataArticleHome = dataArticle;
    return (
        <View style={styles.boxArticleHomeNew}>
            <View style={styles.boxArticleHomeNewList}>
                {
                    dataArticleHome.map((item, index) => {
                        if (index == 0) {
                            return (
                                <View key={item.id} style={styles.boxArticleHomeNewFirst}>
                                    <Image style={styles.boxArticleHomeNewFirstImg} source={{ uri: item.image }} />
                                    <View style={styles.boxArticleHomeNewFirstInfo}>
                                        <Text style={styles.boxArticleHomeNewFirstInfoCat}>{item.category}</Text>
                                        <Text style={styles.boxArticleHomeNewFirstInfoName} numberOfLines={2}>{item.title}</Text>
                                    </View>
                                </View>
                            )
                        } else if (index > 0 && index < 5) {
                            return (
                                <View key={item.id} style={styles.boxArticleHomeNewListItem}>
                                    <Image style={styles.boxArticleHomeNewListImg} source={{ uri: item.image }} />
                                    <View style={styles.boxArticleHomeNewListItemInfo}>
                                        <Text style={styles.boxArticleHomeNewListItemInfoName} numberOfLines={2}>{item.title}</Text>
                                        <Text style={styles.boxArticleHomeNewListItemInfoTime}>{item.createDate}</Text>
                                    </View>
                                </View>
                            )
                        }
                    })
                }
            </View>
        </View>
    )
}

const ArticleNewHome = () => {
    const dataArticleNew = dataArticle;
    return (
        <View style={styles.boxArticleNewHome}>
            <View style={styles.boxArticleNewHomeTitle}>
                <Text style={styles.boxArticleNewHomeTitleText}>Bài viết mới nhất</Text>
                <View style={styles.boxArticleNewHomeTitleLine}></View>
            </View>
            <View style={styles.boxArticleNewHomeList}>
                {
                    dataArticleNew.map(item =>
                        <View style={styles.boxArticleNewHomeItem} key={item.id}>
                            <View style={styles.boxArticleNewHomeItemcontent}>
                                <View style={styles.boxArticleNewHomeItemInfo}>
                                    <Text style={styles.boxArticleNewHomeItemName} numberOfLines={4}>{item.title}</Text>
                                    <View style={styles.boxArticleNewHomeItemTimeView}>
                                        <Text style={styles.boxArticleNewHomeItemTime}>{item.createDate}</Text>
                                        <View style={styles.boxArticleNewHomeItemView}>
                                            <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
                                            <Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
                                        </View>
                                        <View style={styles.boxArticleNewHomeItemView}>
                                            <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
                                            <Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
                                        </View>
                                    </View>
                                </View>
                                <View style={styles.boxArticleNewHomeItemImageCt}>
                                    <Image style={styles.boxArticleNewHomeItemImage} source={{ uri: item.image }} />
                                </View>
                            </View>
                            <Text style={styles.boxArticleNewHomeItemSummary} numberOfLines={2}>{item.summary}</Text>
                        </View>
                    )
                }
            </View>
        </View>
    )
}

const ArticleHot = () => {
    const dataArticleNew = dataArticle;
    let counter = 1;
    return (
        <View style={styles.boxArticleHomeHot}>
            <View style={styles.boxArticleNewHomeTitle}>
                <Text style={styles.boxArticleNewHomeTitleText}>Bài viết nổi bật</Text>
                <View style={styles.boxArticleNewHomeTitleLine}></View>
            </View>
            <View style={styles.boxArticleNewHomeList}>
                {
                    dataArticleNew.map((item, index) => {
                        if (index == 0) {
                            return (
                                <View key={item.id} style={styles.articleHotFirst}>
                                    <Image style={styles.articleHotFirstImg} source={{ uri: item.image }} />
                                    <View style={styles.articleHotFirstInfo}>
                                        <Text style={styles.articleHotFirstInfoNum}>01</Text>
                                        <View style={styles.articleHotFirstInfoContent}>
                                            <Text style={styles.articleHotName} numberOfLines={2}>{item.title}</Text>
                                            <Pressable style={styles.articleHotSahre}>
                                                <FontAwesome style={styles.articleHotSahreIcon} name="share-alt" />
                                                <Text style={styles.articleHotSahreText}>Chia sẻ</Text>
                                            </Pressable>
                                        </View>
                                    </View>
                                </View>
                            )
                        } else if (index > 0 && index < 4) {
                            { counter++ }
                            return (
                                <View key={item.id} style={styles.articleHotItem}>
                                    <View style={styles.articleHotInfo}>
                                        <Text style={styles.articleHotNum}>0{counter}</Text>
                                        <View style={styles.articleHotInfoContent}>
                                            <Text style={styles.articleHotName} numberOfLines={2}>{item.title}</Text>
                                            <Pressable style={styles.articleHotSahre}>
                                                <FontAwesome style={styles.articleHotSahreIcon} name="share-alt" />
                                                <Text style={styles.articleHotSahreText}>Chia sẻ</Text>
                                            </Pressable>
                                        </View>
                                    </View>
                                </View>
                            )
                        }
                    }
                    )
                }
            </View>
        </View>
    )
}

const ArticleListHome = () => {
    const listArticleCat = [
        'Review sản phẩm',
        'Tin game',
        'Tin khuyến mãi',
        'Sự kiện'
    ];
    const dataArtileList = dataArticle;
    const styleTitle = {
        fontSize: 14,
    }
    return (
        <View>
            {
                listArticleCat.map((item, index) =>
                    <View style={styles.boxArticleHomeList} key={index}>
                        <View style={styles.boxArticleNewHomeTitle}>
                            <Text style={styles.boxArticleNewHomeTitleText}>{item}</Text>
                            <View style={styles.boxArticleNewHomeTitleLine}></View>
                        </View>
                        <View>
                            {
                                dataArtileList.map(item => <ArticleItem key={item.id} id={item.id} title={item.title}
                                    image={item.image} category={item.category} visit={item.visit}
                                    comment={item.comment} createDate={item.createDate} summary={item.summary} styleTitle={styleTitle} />)
                            }
                        </View>
                        <View style={styles.boxArticleHomeListVm}>
                            <View style={styles.boxArticleHomeListVmLineL}></View>
                            <Pressable style={styles.boxArticleHomeListVmBt}>
                                <Text style={styles.boxArticleHomeListVmText}>Xem thêm</Text>
                            </Pressable>
                            <View style={styles.boxArticleHomeListVmLineR}></View>
                        </View>
                    </View>
                )
            }
        </View>

    )
}

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20;
const halfWinWidth = winWidth / 2;
const ratio = winWidthP10 / 850; //541 is actual image width


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    brecrumb: {
        display: 'flex',
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row',
        height: 18,
        alignItems: 'center',
        marginTop: 10,
        marginBottom: 10,
    },
    brecrumbText: {
        fontSize: 13,
        color: '#222',
    },
    brecrumbTextLast: {
        fontSize: 13,
        color: '#b7b7b7',
    },
    brecrumbIcon: {
        fontSize: 13,
        color: '#222',
        marginLeft: 6,
        marginRight: 6
    },
    boxArticleHomeNew: {
        paddingHorizontal: 10,
        width: winWidth,
        marginBottom: 10,
    },
    boxArticleHomeNewFirst: {
        marginBottom: 20,
        position: 'relative',
    },
    boxArticleHomeNewFirstImg: {
        width: '100%',
        height: 450 * ratio,
    },
    boxArticleHomeNewFirstInfo: {
        padding: 10,
        position: 'absolute',
        left: 0,
        bottom: 0,
        backgroundColor: 'rgba(0,0,0,0.3)',
        width: '100%',
    },
    boxArticleHomeNewFirstInfoCat: {
        backgroundColor: '#ce0707',
        width: 150,
        maxWidth: '100%',
        textAlign: 'center',
        color: '#fff',
        textTransform: 'uppercase',
        paddingVertical: 5,
        overflow: 'hidden',
        marginBottom: 8,
    },
    boxArticleHomeNewFirstInfoName: {
        width: '100%',
        fontSize: 30,
        fontWeight: 'bold',
        color: '#fff',
    },
    boxArticleHomeNewList: {
        flexDirection: 'column',
    },
    boxArticleHomeNewListItem: {
        width: '100%',
        marginBottom: 10,
    },
    boxArticleHomeNewListImg: {
        width: '100%',
        height: 450 * ratio,
    },
    boxArticleHomeNewListItemInfo: {},
    boxArticleHomeNewListItemInfoName: {
        marginVertical: 7,
        width: '100%',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#222222'
    },
    boxArticleHomeNewListItemInfoTime: {
        fontSize: 13,
        color: '#888888'
    },
    boxArticleNewHome: {
        width: winWidth,
        paddingHorizontal: 10,
    },
    boxArticleNewHomeTitle: {
        paddingVertical: 10,
        marginBottom: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1',
    },
    boxArticleNewHomeTitleText: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#ce0707',
        textTransform: 'uppercase',
    },
    boxArticleNewHomeTitleLine: {
        width: 100,
        height: 1,
        backgroundColor: '#ce0707',
        position: 'absolute',
        bottom: -1,
        left: 0,
    },
    boxArticleNewHomeList: {
        flexDirection: 'column',
        width: '100%'
    },
    boxArticleNewHomeItem: {
        marginBottom: 20,
        width: '100%',
        flexDirection: 'column',
    },
    boxArticleNewHomeItemcontent: {
        width: '100%',
        marginBottom: 10,
        flexDirection: 'row'
    },
    boxArticleNewHomeItemInfo: {
        width: '65%',
        paddingRight: 10,
    },
    boxArticleNewHomeItemName: {
        width: '100%',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#222222',
        marginBottom: 8,
    },
    boxArticleNewHomeItemTimeView: {
        flexDirection: 'row',
    },
    boxArticleNewHomeItemTime: {
        fontSize: 13,
        color: '#888',
        alignItems: 'center'
    },
    boxArticleNewHomeItemView: {
        flexDirection: 'row',
        marginLeft: 10,
        alignItems: 'center'
    },
    boxArticleNewHomeItemIcon: {
        fontSize: 11,
        color: '#2e9fff',
        marginRight: 2,
    },
    boxArticleNewHomeItemViewText: {
        fontSize: 13,
        color: '#888'
    },
    boxArticleNewHomeItemImageCt: {
        width: '35%',
        paddingTop: '35%',
        position: 'relative',
        overflow: 'hidden',
    },
    boxArticleNewHomeItemImage: {
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    boxArticleNewHomeItemSummary: {},
    boxArticleHomeHot: {
        width: winWidth,
        paddingHorizontal: 10,
    },
    articleHotFirst: {
        marginBottom: 20,
        paddingBottom: 10,
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 1,
    },
    articleHotFirstImg: {
        width: '100%',
        height: ratio * 450,
        marginBottom: 10,
    },
    articleHotFirstInfo: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    articleHotFirstInfoNum: {
        width: 75,
        paddingRight: 10,
        fontSize: 50,
        fontWeight: 'bold',
        color: '#cacaca',
        fontStyle: 'italic',
    },
    articleHotFirstInfoContent: {
        width: winWidth - 95,
        paddingLeft: 10,
        borderLeftWidth: 1,
        borderLeftColor: '#e1e1e1'
    },
    articleHotName: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#222',
        marginBottom: 10,
    },
    articleHotSahre: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    articleHotSahreIcon: {
        color: '#45629f',
        marginRight: 3,
    },
    articleHotSahreText: {
        color: '#999'
    },
    articleHotItem: {
        marginBottom: 20,
    },
    articleHotInfo: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    articleHotNum: {
        width: 40,
        height: 40,
        marginRight: 10,
        fontSize: 16,
        fontWeight: 'bold',
        color: '#222',
        fontStyle: 'italic',
        backgroundColor: '#f0eded',
        textAlign: 'center',
        lineHeight: 40,
        borderRadius: 20,
        overflow: 'hidden',
    },
    articleHotInfoContent: {
        width: winWidth - 70,
        paddingLeft: 10,
    },
    boxArticleHomeList: {
        width: winWidth,
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    boxArticleHomeListVm: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 20,
    },
    boxArticleHomeListVmLineL: {
        width: halfWinWidth - 85,
        height: 1,
        backgroundColor: '#e1e1e1'
    },
    boxArticleHomeListVmLineR: {
        width: halfWinWidth - 85,
        height: 1,
        backgroundColor: '#e1e1e1'
    },
    boxArticleHomeListVmBt: {
        width: 115,
        height: 34,
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    boxArticleHomeListVmText: {
        color: '#888'
    },
})