import React, { useEffect, useRef, useState } from 'react';
import { ScrollView, View, Text, TouchableOpacity, BackHandler } from 'react-native';
import { FontAwesome, Ionicons } from '@expo/vector-icons';
import config from '../../components/data/config.json'
import { styles } from '@/components/style/style';
import { FAB } from 'react-native-elements';
import { useNavigation, NavigationProp, useFocusEffect } from '@react-navigation/native';
import { GestureHandlerRootView, TextInput } from 'react-native-gesture-handler';
import { addStorage, cfg } from '@/components/lib/cfg';
import { DB } from '@/components/lib/db';
import AsyncStorage from '@react-native-async-storage/async-storage';


const SettingScreen = () => {
    const [bgHead, setBgHead] = useState<any>(null)
    const [title, setTitle] = useState('');
    const [popup, setPopup] = useState(true)
    const [dataList, setDataList] = useState<any>([]);

    const inputRef = useRef<TextInput>(null); // Create a ref for the TextInput
    const [contact, setContact] = useState<any>([]);
    const [produk, setProduk] = useState<{
        name: string
        , value: string
    }[]>([]);


    const getData:any = {
        uom: function(){
            return new Promise(async(resolve,reject)=>{
                let uom = await DB(`
                    SELECT C
                        .NAME ->> 'en_US' kat,
                        u.create_uid,
                        u.NAME,
                        u.factor 
                    FROM
                        "public".uom_uom u
                        LEFT JOIN "public".uom_category C ON C.create_uid = u.create_uid
                    WHERE C.name->>'en_US' = 'Rokok'
                    ORDER BY u.factor DESC
                `);
                addStorage("master oum", uom);
                cfg.dataPilihan.uom = uom;
                resolve(uom);
            })
        },
        uomkat: function(){
            return new Promise(async (resolve, reject) => {
                let uom = await DB(`
                    SELECT create_uid, name  FROM uom_category
                `);
                cfg.dataPilihan.uomkat = uom;
                addStorage('master uomkat', uom)
                resolve(uom);
            })
        }
        ,product: function () {
            return new Promise(async (resolve, reject) => {
                let uom = await DB(`
                    SELECT P
                        .ID,
                        P.NAME ->> 'en_US' AS NAME,
                        P.list_price * factor AS list_price,
                        P.uom_id,
                        u.factor
                    FROM
                        product_template
                        P LEFT JOIN product_tag_product_template_rel T ON P.ID = T.product_template_id
                        LEFT JOIN product_tag pt ON T.product_tag_id = pt.ID 
                        LEFT JOIN uom_uom u ON u.id = p.uom_id
                    WHERE
                        pt.NAME ->> 'en_US' = 'rokok' ORDER BY id ASC; 
                `);
                cfg.dataPilihan.product = uom;
                addStorage('master product', uom)
                resolve(uom);
            })
        }
    }

    const navigation = useNavigation<NavigationProp<RootStackParamList>>();

    const Contact = (props: any) => {
        return (
            <>
                {(props?.data || []).map((data: any, key: number) =>
                    <TouchableOpacity key={key} onPress={ async (attribs) => {
                        setTitle(data?.name)
                        let datas:any = await getData[data?.row]();
                        setDataList(datas);
                        setPopup(true);
                    }}>
                        <View style={[
                            { 
                                padding: 10
                                , paddingVertical: 16
                                ,  borderTopColor: "#ddd"
                                , borderTopWidth: key == 0 ? 0 : 1 
                                , width: 120
                            }
                            , { 
                                flexDirection: "column"
                                , alignItems: "center" 
                            }
                        ]}>
                            <View style={[{ height:100, backgroundColor:"white", alignItems:"center", paddingHorizontal:10, paddingVertical:8, width:"100%", borderRadius:10 }]}>
                                {data.type == 'ionic' ?
                                    <Ionicons name={data?.icon} style={[{ color:config.color.textbiru, paddingHorizontal: 0}, {fontSize:40}]} />
                                    :
                                    <FontAwesome name={data?.icon} style={[{ color:config.color.textbiru, paddingHorizontal: 5}, {fontSize:40}]} />
                                }
                                <Text ellipsizeMode='tail' style={[{ fontSize:14, flex: 1, color:config.color.textbiru, textAlign:"center", fontWeight:'700', paddingVertical:5 }]}>{data.value ? data.value : data.name.split(" ").join("\n").toUpperCase()}</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                )}
            </>
        )
    }
 
    const loadData = async function(){
        await getData.uom()
        await getData.uomkat()
        await getData.product()
    }

    useEffect(()=>{
        loadData();
    },[])


    const ListData = function (props: any) {
        return (
            <>
                {props.data && props.data.filter((d: any, i: any) => d.name["en_US"] && d.name["en_US"] != '' ).map((data:any, i:any)=>
                    <View key={i} style={[{ 
                        backgroundColor: config.color.textbiru
                        , padding: 0
                        , height: 'auto'
                        , marginHorizontal: 20
                        , marginVertical: 5
                        , borderRadius: 15
                        , overflow:'hidden'
                    }]}>
                        <View style={{
                            backgroundColor:"#fff"
                            , marginLeft:8
                            , padding: 10
                            , borderTopLeftRadius: 15
                            , borderBottomLeftRadius: 10
                        }}>
                            {data.kat ? (
                                <Text style={{fontSize:20, fontWeight:"bold"}}>{data.kat ? data.kat:""}</Text>
                            ):<></>}
                            <Text style={{fontSize:14, fontWeight:"semibold"}}>Unit : {data.name ? data.name["en_US"]:""}</Text>
                            <Text style={{fontSize:14, fontWeight:"semibold"}}>Value : {data.factor ? (1/Number(data.factor)) :""}</Text>
                        </View>
                    </View>
                )}
            </>
        )
    }

    useFocusEffect(
        React.useCallback(() => {

            const onBackPress = () => {
                if(popup === false){
                    navigation.navigate("home");
                }
                return true;
            };

            BackHandler.addEventListener('hardwareBackPress', onBackPress);
            navigation.setOptions({ headerLeft: () => null }); // Remove back button

            return () => {
                BackHandler.removeEventListener('hardwareBackPress', onBackPress);
            };
        }, [navigation, popup])
    );

    const callData = async () => {

        setContact([
            {
                name: "Product Unit",
                row: "uom",
                icon: "file-tray-stacked-outline",
                type: "ionic"
            }
            , {
                name: "Product List",
                row: "uomkat",
                icon: "cube-outline",
                type: "ionic"
            }
        ]);


    };

    useEffect(() => {
        (function () {
            callData()
        })();

    }, [])

    const customerBack = function () {
        navigation.navigate('home')
    }

    const fabAction = function () {
        // console.log("action")
    }

    const onScroll = (event: any) => {
        const yOffset = event.nativeEvent.contentOffset.y;
        if (yOffset > 190) {
            setBgHead(config.color.primary)
        } else {
            setBgHead(null)
        }
    };

    cfg.action['setting'] = function () {
        setPopup(false);
        loadData();
    };

    return (
        <>
            {popup && ( 
                <>
                    <View style={{
                        height: "100%",
                        width: "100%",
                        zIndex:1,
                        position:'absolute',
                        backgroundColor:'white',
                    }}>
                        <View style={{
                            paddingHorizontal: 30
                            , paddingTop:40
                            , paddingBottom: 10
                            , shadowColor:"#333"
                            , shadowOffset: { width: 0, height: 10 } // Updated here
                            , shadowOpacity: 0.8
                            , shadowRadius: 10
                            , backgroundColor: config.color.primary
                        }}>
                            <Text style={{ textAlign: 'center', color: 'white', fontSize: 20, fontWeight:'bold' }}>{title}</Text>
                        </View>
                        <ScrollView style={{backgroundColor:"#eee"}}>
                            <View style={{paddingVertical: 10}}>
                                <ListData data={dataList}></ListData>
                            </View>
                        </ScrollView>
                    </View>
                    <FAB onPress={()=>{
                        setPopup(false);
                    }} style={{zIndex:2, position:'absolute', bottom:20, right:20}} icon={{name:"close", color:"white"}} color={config.color.primary}></FAB>
                </>
            )}

            <GestureHandlerRootView>
                <View style={[{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    backgroundColor: bgHead != '' ? bgHead : 'none',
                    padding: 10,
                    zIndex: 3, // Make sure it stays on top of other content
                }, styles.flexStartBottom, { width: '100%', height: 80, justifyContent: 'flex-start', position: 'absolute', top: 0 }]}>
                    <TouchableOpacity onPress={customerBack}>
                        <Ionicons style={{ padding: 8, marginHorizontal: 8, borderRadius: 30, backgroundColor: "rgba(0,0,0,.2)" }} name='arrow-back-outline' size={20} color={'white'}></Ionicons>
                    </TouchableOpacity>
                </View>
                <ScrollView onScroll={onScroll}>
                    <View style={styles.container}>
                        <View style={[{ paddingVertical: 20, paddingTop: 40 }, styles.header, { backgroundColor: config.color.primary }]}>
                            <Text style={[styles.name, { color: "white", fontSize:25 }]}>Setting</Text>
                        </View>
                        <View style={[{ 
                            paddingHorizontal: 20
                            , paddingVertical: 5
                            , flexDirection: 'row'
                        }]}>
                            <Contact data={contact}></Contact>
                        </View>
                    </View>
                </ScrollView>
                <View style={{position:'absolute', bottom:0, left:0,zIndex:1, width: '100%', height: 50, backgroundColor: config.color.primary}}>
                    <TouchableOpacity onPress={async ()=>{
                        await AsyncStorage.removeItem('login');
                        navigation.navigate('index')
                    }}>
                        <View style={{
                            backgroundColor:config.color.primary
                            , flexDirection:'row'
                            , alignItems: 'center'
                            , justifyContent:'center'
                            , width:"100%"
                            , height:"100%"
                        }}>
                            <Text style={{fontSize:16, color:'white', fontWeight:'700'}}>{`LOGOUT`}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </GestureHandlerRootView>
        </>
    );
};


export default SettingScreen;