edit form

import {
  FlatList,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import React, {useState, useEffect, useMemo} from 'react';
import {AccordionItem, Button, Gap, Header, Input} from '../../components';
import {colors, fonts, getData, useForm} 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 Modal from 'react-native-modal';
import {ScrollView} from 'react-native-gesture-handler';
import {useDispatch, useSelector} from 'react-redux';
import {store} from '../../redux/store';
import {editHistory} from '../../redux/reducer/history';

// import { TouchableOpacity } from 'react-native-gesture-handler'

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 {userProfile, setUserProfile} = useState({});

  // const [filteredHistoryData, setFilteredHistoryData] = useState([]);

  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 :', depoArray);
      })
      .catch(err => {
        console.log('gagal', err);
      });
  }; // mengambil data listing depo

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

  const getEdit = id_stock => {
    //get data edit ketika tombol edit history di click

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

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

    axios
      .get(`${API_HOST.url_staging}/stock_sps/data_stock/`+id_stock, {
        headers: {
          Authorization: authHeader,
        },
        params: {
          id_stock,
        },
      })
      .then(res => {
        // dispatch({type: 'SET_GET_HISTORY', value: res.data})
        dispatch({type: 'SET_EDIT_HISTORY', value: {
          id_stock: res.data.id_stock,
          id_line: res.data.id_line,
          titik_pallet: res.data.titik_pallet
        }});

        console.log('successs gan": ', res.data);
      })
      .catch(err => console.log(err));
  };
  const [isModalVisible, setIsModalVisible] = useState(false);

  const {historyData} = route.params; // mengirim parameter dari screen History

  const dispatch = useDispatch();

  const historyEdit = useSelector(state => state.historyEditReducer);

  const [valueHistory, setValueHistory] = useState({
    id_line: historyEdit.id_line,
    titik_pallet: historyEdit.titik_pallet
  }); // selector form edit

  console.log('returned', historyEdit);

  const changeText = () => {
    setValueHistory({id_line: '', id_stock: '', titik_pallet: ''})
    dispatch({
      type: 'SET_EDIT_HISTORY',
      value: {
        ...historyEdit,
        [key]: value,
      },
    });
  };// mengambil hasil value untuk di ubah di input component

  return (
    <>
      <Header title="Detail History SPS" type="default" />
      <View
        style={{
          flex: 1,
          top: 10,
          paddingHorizontal: 12,
          backgroundColor: '#FFFFFF',
        }}>
        <View style={{flex: 1}}>
          {kodeDepo === '001' && historyData.length > 0 ? (
            <>
              <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 => {
                  setSelectedDepo(item.id);
                  setKodeDepo(item.id);
                }}
                itemTextStyle={{
                  color: colors.secondary,
                  fontSize: 13,
                  fontFamily: fonts.primary[200],
                }}
              />

              <FlatList
                data={
                  selectedDepo
                    ? historyData.filter(item => item.id_depo === selectedDepo)
                    : historyData
                }
                keyExtractor={(item, index) => index.toString()}
                renderItem={({item, index}) => (
                  <AccordionItem
                    key={index}
                    id_line={item.line}
                    title={item.line}
                    depo={item.depo}
                    tanggal={item.tanggal}
                    sku={item.nama_produk}
                    qty_pallet={item.titik_pallet}
                    total={item.total_stock}
                    rusak_karton={item.rusak_karton}
                    afkir={item.afkir}
                    button={
                      <TouchableOpacity
                        style={styles.btnEdit}
                        activeOpacity={0.8}
                        onPress={() => getEdit(item.id_stock)}>
                        <Text style={styles.textEdit}>Edit History</Text>
                      </TouchableOpacity>
                    } // hasil dari function getEdit ditampilkan di component ini
                  />
                )}
              />
            </>
          ) : (
            <FlatList
              data={historyData}
              keyExtractor={(item, index) => index.toString()}
              renderItem={({item, index}) => (
                <AccordionItem
                  key={index}
                  id_line={item.line}
                  title={item.line}
                  depo={item.depo}
                  tanggal={item.tanggal}
                  sku={item.nama_produk}
                  qty_pallet={item.titik_pallet}
                  total={item.total_stock}
                  rusak_karton={item.rusak_karton}
                  afkir={item.afkir}
                  // button={buttonEdit()}
                />
              )}
            />
          )}
        </View>

        <View>
          <Modal
            isVisible={isModalVisible}
            backdropColor="black"
            animationIn={'slideInDown'}>
            <ScrollView showsVerticalScrollIndicator={false}>
              <View
                style={{flex: 1, borderRadius: 5, backgroundColor: '#FFFF'}}>
                <Text
                  style={{
                    fontFamily: fonts.primary[300],
                    fontSize: 16,
                    left: 20,
                    top: 16,
                  }}>
                  Edit History Anda
                </Text>
                <Gap height={20} />
                <View style={{paddingHorizontal: 16, marginBottom: 16}}>
                  <Input
                    label="Line"
                    value={valueHistory.id_line}
                    onChangeText={value => changeText('id_line', value)}
                    disable
                  />

                  <Gap height={15} />

                  <Input
                    label="Titik Pallet"
                    value={historyEdit.titik_pallet}
                    onChangeText={value => changeText('titik-pallet', value)}
                    disable
                  />
                </View>
              </View>
            </ScrollView>
          </Modal>
        </View>

        {/* {kodeDepo == '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={kodeDepo}
            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, index) => index.toString()}
              renderItem={({ item, index }) =>
                <AccordionItem
                id_line={item.line}
                title={item.line}
                qty_pallet={item.titik_pallet}
                depo={item.depo}
                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>
          )}
        </>
      ) : historyData && (
        <FlatList
          data={historyData}
          keyExtractor={(item) => item.id_line}
          renderItem={({ item }) =>
            <AccordionItem
              id_line={item.line}
              title={item.line}
              qty_pallet={item.titik_pallet}
              depo={item.depo}
              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,
  },

  btnEdit: {
    backgroundColor: colors.secondary,
    justifyContent: 'center',
    padding: 12,
    width: 120,
    borderRadius: 5,
    marginLeft: 38,
  },

  textEdit: {
    fontSize: 14,
    color: '#FFFFFF',
    textAlign: 'center',
    fontFamily: fonts.primary[300],
  },
});