import React,{useState,useEffect,useRef} from 'react';
import { useRoute } from '@react-navigation/native';
import { customStyles, 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={}){
    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 otherData=selected_data.otherData?selected_data.otherData:{};
    var data=[];

    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>;
            
        data.push(obj);
    });
    
    return (
        <ModalSelector
        data={data}
        
        touchableActiveOpacity={0.8}
        style={customStyle.addVisPickerStyle}
        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}
        cancelStyle={{fontFamily:'Zocial'}}
        >
        <Text style={[customStyle.addVisPicker_InputStyle]}>{(selected_data.value || '-'+ST.select+'-')}</Text>
        </ModalSelector>
    )
}

export function CustomPicker2(props){
    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}=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);
            }
        });
    }, []);
    
    
    
    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}
        >
        <Text style={[customStyle.addVisPicker_InputStyle,props.InputStyle!=null?props.InputStyle:{}]}>{(selected_data.value || '-'+ST.select+'-')}</Text>
        </ModalSelector>
    )
}