conditional

import { FlatList, SafeAreaView, 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'



const DetailHistorySps = ({ route }) => {

  const [kodeDepo , setKodeDepo] = useState('')
  const [depoData, setDepoData] = useState([]);
  const [dataDepo, setDataDepo] = useState(null);
  const [isFocus, setIsFocus] = useState(false)
  const [selectedDepo, setSelectedDepo] = useState(null)


  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
        })
      }
      setDepoData(depoArray)
      // handleSkuChange(skuArray[0])
      setKodeDepo(depoArray[0].id);
      console.log('kode :', kodeDepo);
    }).catch(err => {
      console.log('gagal', err);
    })
  } // mengambil data listing depo

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

  const { historyData, type_user} = route.params;
  // const isPusat = type_user === '001'

  return (
    <>
      <Header title="Detail History SPS" type='default' />
      <View style={{ flex: 1, top: 10, paddingHorizontal: 12, backgroundColor: "#FFFFFF" }}>
      {type_user == '001' && historyData.length < 0 ? (
        <>
            <Dropdown
            style={styles.dropdownCover}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            search
            labelField='label'
            valueField='id'
            data={depoData}
            maxHeight={300}
            value={dataDepo}
            placeholder={!isFocus ? 'Pilih Depo' : '....'}
            searchPlaceholder='Search...'
            onChange={item => {
              setKodeDepo(item.id);
              setSelectedDepo(item.id);
            }}
            itemTextStyle={{ color: colors.secondary, fontSize: 13, fontFamily: fonts.primary[200] }}
          />
          {selectedDepo ? (
            <FlatList
              data={historyData.filter(item => item.id_depo === selectedDepo)}
              keyExtractor={(item) => item.line}
              renderItem={({ item, index }) =>
                <AccordionItem
                key={index}
                  id_line={item.line}
                  title={item.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>
          )}
        </>
      ) : (
        <FlatList
          data={historyData}
          keyExtractor={(item) => item.id_line}
          renderItem={({ item }) =>
            <AccordionItem
              id_line={item.line}
              title={item.line}
              qty_pallet={item.titik_pallet}
              total={item.total_stock}
            />
          }
        />
      )}
        </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
  }
})