get item react native

import { FlatList, StyleSheet, Text, View } from 'react-native'
import React, { useState, useEffect, useMemo } from 'react'
import { AccordionItem, Header } from '../../components'
import { colors, fonts, getData } from '../../utils'
import { IcNotFound } from '../../assets'
import axios from 'axios'
import base64 from 'react-native-base64';
import { Dropdown } from 'react-native-element-dropdown'
import { API_HOST } from '../../config'

import { useIsFocused } from '@react-navigation/native'


const DetailHistorySps = () => {

  const [kodeDepo , setKodeDepo] = useState('')
  const [userProfile, setUserProfile] = useState({})
  const [historyData, setHistoryData] = useState([])
  const [depoData, setDepoData] = useState([]);
  const [dataDepo, setDataDepo] = useState(null);
  const [isFocus, setIsFocus] = useState(false)
  const [selectedDepo, setSelectedDepo] = useState(null)



  // useEffect(() => {
  //   if(userProfile) {
  //     getData('userProfile').then(res => {
  //       setUserProfile(res);
  //     })
  //   }
  //   getHistory();
  //   getDepo();
  // }, [])

  // useEffect(() => {
  //   getHistory();
  // }, [historyData])

  const getDepo = () => {
    let username = 'admin'
    let adminPassword = 'Databa53'
    const authHeader = 'Basic ' + base64.encode(`${username}:${adminPassword}`);
    axios.get(`${API_HOST.url_staging}/depo`, {
      headers: {
        Authorization: authHeader
      }
    })
    .then(res => {
      // console.log('data line :', res.data);
      let count = Object.keys(res.data).length;
      let depoArray = []
      for (let i = 0; i < count; i++) {
        depoArray.push({
          id: res.data[i].kode_depo,
          label: res.data[i].depo,
          // total: res.data[i].qty
        })
      }
      console.log('kode :', kodeDepo);
      setDepoData(depoArray)
      // handleSkuChange(skuArray[0])
      setKodeDepo(res.data[0].kode_depo);
    }).catch(err => {
      console.log('gagal', err);
    })
  } // mengambil data listing depo

  const getHistory = () => {
    // mengambil get data flatlist yg akan di render

      let username = 'admin';
      let adminPassword = 'Databa53';
      const authHeader = 'Basic ' + base64.encode(`${username}:${adminPassword}`);

      // let selectedKodeDepo = userProfile.lokasi_id === '001' ? kodeDepo : userProfile.lokasi_id;

      // let selectedKodeDepo = userProfile.lokasi_id === '001' ? (selectedDepo || kodeDepo) : userProfile.lokasi_id;

      // let selectedKodeDepo = selectedDepo ? selectedDepo : userProfile.lokasi_id === '001' ? kodeDepo : userProfile.lokasi_id;

      let selectedKodeDepo = selectedDepo || (userProfile.lokasi_id === '001' ? kodeDepo : userProfile.lokasi_id);



      // if (selectedKodeDepo && selectedKodeDepo !== '001') {
      //   selectedKodeDepo = kodeDepo;
      // }

      const today = new Date().toISOString().slice(0, 10);

    axios.get('https://modust.tvip.co.id/rest_api_appopname_wop/stock_sps/data_history/', {
      headers: {
              Authorization: authHeader,
              'Content-Type': 'application/json',
       },
       params: {
        type_stock: userProfile.type_user,
        id_depo: selectedKodeDepo,
        tanggal: today,
      },
    }).then(res => {
      setHistoryData(res.data.data)
      console.log('success: ', res.data.data)

    })
    .catch(err => {
      console.log('err: ', err)
      setHistoryData([])
    })
  }

  const isFocused = useIsFocused();

  useEffect(() => {
    getData('userProfile').then(res => {
      // console.log('profile', res);
      setUserProfile(res);
    })
    getHistory();
    getDepo();
  }, [isFocused])

  const isPusat = userProfile.lokasi_id === '001';

  return (
    <>
      <Header title="Detail History SPS" type='default' />
      <View style={{ flex: 1, top: 10, paddingHorizontal: 12, backgroundColor: "#FFFFFF" }}>
        {isPusat && (
          <>
          <Dropdown
            style={styles.dropdownCover}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            search
            labelField='label'
            valueField='value'
            data={depoData}
            maxHeight={300}
            value={dataDepo}
            placeholder={!isFocus ? 'Pilih Depo' : '....'}
            searchPlaceholder='Search...'
            onChange={item => {
              setKodeDepo(item.id);
              setSelectedDepo(item.id);
              // setDataDepo(item.id)
            }}

            itemTextStyle={{ color: colors.secondary, fontSize: 13, fontFamily: fonts.primary[200] }}
            />

            <View>
            <FlatList
            data={historyData}
            keyExtractor={(item) => item.id_line}
            renderItem={({ item }) =>
            <AccordionItem
            id_line={item.id_line}
            title={item.id_line}
            qty_pallet={item.titik_pallet}
            total={item.total_stock}
            />}
          />
            </View>

          </>
        )}
      {historyData && historyData.length > 0 ? (
        <FlatList
          data={historyData}
          keyExtractor={(item) => item.id_line}
          renderItem={({ item }) =>
          <AccordionItem
          id_line={item.id_line}
          title={item.id_line}
          qty_pallet={item.titik_pallet}
          total={item.total_stock}
          />}
        />
      ) : (
        <View style={{ paddingVertical: 10, justifyContent: 'center', alignItems: 'center', flex: 1 }}>
          <IcNotFound />
          <Text style={{ top: 30, fontSize: 23, fontFamily: fonts.primary[300], color: '#020202' }}>
            Oops Belum Tersedia Inputan Hari Ini!
          </Text>
        </View>
      )}
      </View>
    </>
  )
}


export default DetailHistorySps;

const styles = StyleSheet.create({
  dropdownCover: {
    height: 50,
    backgroundColor: "#FFFFFF",
    borderRadius: 8,
    padding: 12,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    borderWidth: 0.4,
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
  },

  selectedTextStyle: {
    fontSize: 16,
    color: 'blue',
  },

inputSearchStyle: {
  height: 50,
  fontSize: 15,
  fontFamily: fonts.primary[200],
  color: colors.secondary,
  borderColor: colors.secondary,
  borderRadius: 4,
  },

  selectedTextStyle: {
    fontFamily: fonts.primary[200],
    fontSize: 14,
    color: colors.primary
  }
})