import { View, Text, TextInput,TouchableOpacity, NativeModules, Icon, Image } from 'react-native'
import React,{useState,useEffect} from 'react'
import { mapStateToProps,mapDispatchToProps } from '../reducers/contextProvider';
import {connect} from 'react-redux'
import CustomHeader from '../components/customHeader';
import Container from '../components/container';
import { useRoute } from '@react-navigation/native';
import LinearGradient from 'react-native-linear-gradient';
import { globalStyles,customStyles,GetPageTheme } from "../styles/Global";

import { ConfirmSaveAlert } from '../components/alert';
import { colors_Arr, db} from '../constants/constants';

import { AppTables } from '../constants/tableConstants';
import { ScrollView } from 'react-native-gesture-handler';




function ViewListData(props) {


    const route = useRoute();
  
    const [currentItem, setcurrentItem] = useState({});
    
    const PageTheme=GetPageTheme(props.DarkMode,route.name);
    const customStyle=customStyles(props.DarkMode,route.name);
    const [showAlert, setShowAlert] = useState(false);
    const [viewData,setViewData] = useState([]);
    // const [nodataFound, setNodataFound] = useState(false);

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

    function onSaveCancel(){
        setShowAlert(false);
    }

    function viewResume() {
      console.log('View Resume');
      
    
      db.transaction((tx) => {
  
      //   tx.executeSql('Create table if not exists Details (Name NVARCHAR, Age_Group INTEGER, Gender NVARCHAR,Product NVARCHAR,Purchase NVARCHAR)', [], function (tx, results){
      //     console.log('table create')
            tx.executeSql(`SELECT * FROM ${AppTables.RESUME_DATA} `, [], (tx, results) => {
              console.log("Query completed",results);
              if(results.rows.length>0){
                let arr=[];
                for(let i=0;i<results.rows.length;i++){
                  let data=results.rows.item(i);
                  arr.push(data);
                  if(i==results.rows.length-1){
                    console.log('arr',arr);
                    setViewData(arr);
                  }
                }
                
                
              }
              else{
                console.log('no  data found');
              }
        
            },function(err){console.log('err:',err)});
  
        },function(err){console.log('err2:',err)});
      
    }
    

  return (
    <Container {...props} pt={0} avoidSafeArea={(Platform.OS=='ios'?true:false)}>  
    <CustomHeader {...props} title={'View Resume'}/>
      {ConfirmSaveAlert(props,showAlert,onSaveCancel)}


    <LinearGradient colors={[PageTheme.$gradient1,PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={customStyle.roundScrollWrapper}>
        
    
    <View style={[customStyle.pageContentWrapper,customStyle.ImageTypesPageWrap]}>
            <View style={customStyle.ImageTypesLHd}>
                <Text  style={customStyle.ImageTypesLHdText}>{'Resume'}</Text>
            </View>
    
              
<ScrollView 
 contentContainerStyle={customStyle.hr_scroll} 
 style={customStyle.resume_scrollOuter}
 showsVerticalScrollIndicator={false}>
  <View style = {customStyle.resume_parentbg}>
     {viewData.length>0 &&

          viewData.map((item,index)=>
          {
           console.log('onrender',item);
           let newi=index>2?((index%3)):index;          
           let arr=colors_Arr[newi]?colors_Arr[newi].bg:colors_Arr["0"].bg;
           
           console.log('i:',arr);
          return(
            
            <View style = {customStyle.resume_background} key={index}>
              {/* <View style={customStyle.resume_cBG}> */}
              
              <View  style = {[customStyle.resume_cBG ]} >
              <LinearGradient colors={arr} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={customStyle.resume_cBG_g}>
              </LinearGradient>  
              <Text style={customStyle.resume_dateChild}>{item.ADDED_DATE}</Text>
              <View style={{padding:10}}>
            
                {/* <View style={customStyle.resumev_CircleShape}>
               
                <Text style={customStyle.resume_aText}>{(item.NAME!=null && item.NAME!=''?item.NAME.substring(0,1):'')}</Text>
                </View> */}
                <Text style={customStyle.resume_text}>{item.NAME}</Text>
                <Text style={customStyle.resume_textchild}>{item.MOBILE_NO}</Text>
               
                </View>
                </View>
            </View>
          
            )
          })
          }
            </View>
          </ScrollView>
</View>
    </LinearGradient>
    </Container>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(ViewListData)