import React, { useState, useEffect, useRef } from 'react';
import { useRoute } from '@react-navigation/native';
import { customStyles, deffontfamily, GetPageTheme } from '../styles/Global';
import ModalSelector from 'react-native-modal-selector';
import { Text, View } from 'react-native';

export function CustomPicker(props,Pickerdata,label_key,value_key,onchangeKeyLbl,onchangeKey,onChange=()=>{},selected_data={},selectStyle={},InputStyle={},appendIdInName='',routeParam=null,isDisable=false){
    try{
    const ST=props.StaticText || {};
    const route =routeParam!=null && routeParam.name!=null?routeParam:{name:'ABCScreen'};//useRoute();
   
    // get all theme styles acc to current theme set 
    const PageTheme=GetPageTheme(props.DarkMode,route.name);
    const customStyle=customStyles(props.DarkMode,route.name);
    let otherData=selected_data?.otherData?selected_data?.otherData:{};
    var data=[];

    let selectedFName='';
    Pickerdata?.map((item,index)=>{
        let label1=(item[label_key]+(appendIdInName && item[value_key]!=""?(` (${item[value_key]})`):''));
        let obj={ key: index, label: label1,value:item[value_key],item };
        if((appendIdInName==false && selected_data?.value==item[label_key])  || (appendIdInName && selected_data?.value==item[value_key])){
            selectedFName=label1;
            obj['component']= <View style={customStyle.addvis_selectedOpStyle}><Text style={customStyle.addvis_selectedOpTextStyle}>{label1}</Text></View>;
        }
        data.push(obj);
    });
    
    return (
        <ModalSelector
        data={data}
        touchableActiveOpacity={0.8}
        style={[customStyle.addVisPickerStyle,selectStyle!=null?selectStyle:{}]}
        onChange={(option)=>{onChange(option,onchangeKeyLbl,onchangeKey,otherData) }}
        overlayStyle={customStyle.addVisPickerOverlay}
        cancelContainerStyle={customStyle.addVisPicker_OptionContainerStyle}
        optionStyle={customStyle.addvis_opStyle}
        optionTextStyle={customStyle.addvis_opTextStyle}
        optionContainerStyle={customStyle.addVisPicker_OptionContainerStyle}
        selectedKey={'1'}
        cancelText={ST.Cancel}
        disabled={isDisable}
        cancelStyle={{fontFamily:deffontfamily}}
        cancelTextStyle={{fontFamily:deffontfamily}}
        >
        <Text style={[customStyle.addVisPicker_InputStyle,InputStyle!=null?InputStyle:{}]}>{(selectedFName || '-'+ST.select+'-')}</Text>
        </ModalSelector>
    )
    }
    catch(err){
        console.log("CustomPicker error:",err);
        return null;
    }
}


export function CustomPickerStock(props, Pickerdata, label_key, value_key, onchangeKeyLbl, onchangeKey, onChange = () => { }, selected_data = {}, selectStyle = {}, InputStyle = {}, appendIdInName = '', routeParam = null, isDisable = false) {
    try {
        const ST = props.StaticText || {};
        const route = routeParam != null && routeParam.name != null ? routeParam : { name: 'ABCScreen' };//useRoute();

        // get all theme styles acc to current theme set 
        const PageTheme = GetPageTheme(props.DarkMode, route.name);
        const customStyle = customStyles(props.DarkMode, route.name);
        let otherData = selected_data?.otherData ? selected_data?.otherData : {};
        var data = [];

        let selectedFName = '';
        Pickerdata?.map((item, index) => {
            let label1 = (item[label_key] + (appendIdInName && item[value_key] != "" ? (` (${item[value_key]})`) : ''));
            let obj = { key: index, label: label1, value: item[value_key], item };
            if ((appendIdInName == false && selected_data?.value == item[label_key]) || (appendIdInName && selected_data?.value == item[value_key])) {
                selectedFName = label1;
                obj['component'] = <View style={customStyle.addvis_selectedOpStyle}><Text style={customStyle.addvis_selectedOpTextStyle}>{label1}</Text></View>;
            }
            data.push(obj);
        });

        return (
            <ModalSelector
                data={data}
                touchableActiveOpacity={0.8}

                style={[
                    props.bgColor
                        ? [customStyle.addVisPickerStyle, { width: '50%',height:33, backgroundColor: props.bgColor }]
                        : customStyle.addVisPickerStyle,
                    selectStyle != null ? selectStyle : {}
                ]}
                onChange={(option) => { onChange(option, onchangeKeyLbl, onchangeKey, otherData) }}
                overlayStyle={customStyle.addVisPickerOverlay}
                cancelContainerStyle={customStyle.addVisPicker_OptionContainerStyle}
                optionStyle={customStyle.addvis_opStyle}
                optionTextStyle={customStyle.addvis_opTextStyle}
                optionContainerStyle={customStyle.addVisPicker_OptionContainerStyle}
                selectedKey={'1'}
                cancelText={ST.Cancel}
                disabled={isDisable}
                cancelStyle={{ fontFamily: deffontfamily }}
                cancelTextStyle={{ fontFamily: deffontfamily }}
            >
                <View style={[{ backgroundColor: props.bgColor || '#fff', borderRadius: 8, padding: 8 }]}>
                    <Text
                        style={[
                            props.bgColor ? { color: "black" ,textAlign: "center", textAlignVertical: "center"  } : customStyle.addVisPicker_InputStyle,
                            InputStyle || {},
                            props.bgColor ? { backgroundColor: props.bgColor } : {},

                        ]}
                    >
                        {selectedFName || `-${ST.select}-`}
                    </Text>
                </View>

            </ModalSelector>
        )
    }
    catch (err) {
        console.log("CustomPicker error:", err);
        return null;
    }
}

export function CustomPicker2(props) {
    try {
        const ST = props.StaticText || {};
        const route = useRoute();

        // get all theme styles acc to current theme set 
        const PageTheme = GetPageTheme(props.DarkMode, route.name);
        const customStyle = customStyles(props.DarkMode, route.name);
        let { Pickerdata, label_key, value_key, onchangeKeyLbl, onchangeKey, onChange, selected_data, isDisable } = props;
        let otherData = selected_data?.otherData ? selected_data?.otherData : {};

        const [data, setdata] = useState([]);

        useEffect(() => {
            let arr = []
            Pickerdata?.map((item, index) => {
                let obj = { key: index, label: item[label_key], value: item[value_key] };

                if (selected_data?.value == item[label_key])
                    obj['component'] = <View style={customStyle.addvis_selectedOpStyle}><Text style={customStyle.addvis_selectedOpTextStyle}>{item[label_key]}</Text></View>;

                arr.push(obj);
                if (index == Pickerdata.length - 1) {
                    setdata(arr);
                }
            });
        }, [props.Pickerdata]);


        return (
            <ModalSelector
                data={data}

                touchableActiveOpacity={0.8}
                style={[customStyle.addVisPickerStyle, props.selectStyle != null ? props.selectStyle : {}]}
                onChange={(option) => { onChange(option, onchangeKeyLbl, onchangeKey, otherData) }}
                overlayStyle={customStyle.addVisPickerOverlay}
                cancelContainerStyle={customStyle.addVisPicker_OptionContainerStyle}
                optionStyle={customStyle.addvis_opStyle}
                optionTextStyle={customStyle.addvis_opTextStyle}
                optionContainerStyle={customStyle.addVisPicker_OptionContainerStyle}
                selectedKey={'1'}
                cancelText={ST.Cancel}
                disabled={isDisable}
                cancelStyle={{ fontFamily: deffontfamily }}
                cancelTextStyle={{ fontFamily: deffontfamily }}
            >
                <Text style={[customStyle.addVisPicker_InputStyle, props.InputStyle != null ? props.InputStyle : {}, (props.ShowError != null && props.ShowError == true && props.ErrorStyle != null ? props.ErrorStyle : {})]}>{(selected_data?.value || '-' + ST.select + '-')}</Text>
            </ModalSelector>
        )

    }
    catch (err) {
        console.log("CustomPicker2 error:", err);
        return null;
    }
}