import React, {Component, useState, useEffect} from 'react';
import {View, Text, FlatList} from 'react-native';
import Item from './Item';
import {getListPartner} from '../../../apis/Functions/users';
import HeaderPartner from '../../../components/Header/HeaderPartner';
import {showAlert, TYPE} from '../../../components/DropdownAlert';
import AppText from '../../../components/AppText';
import I18n from '../../../helper/i18/i18n';
import SearchModal from './SearchModal2';

const Level1 = (props) => {
  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);
  const [tottalPage, setTotalPage] = useState(1);
  const [isRefresh, setisRefresh] = useState(false);
  const [isModalVisible, setModalVisible] = useState(false);

  const [trader_account_status, setTrader_account_status] = useState(
    props.route.params.trader_account_status,
  );
  const [level, setLevel] = useState(props.route.params.level);
  const [keyword, setKeyword] = useState(props.route.params.keyword);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  useEffect(() => {
    getData();
  }, [level, trader_account_status, keyword]);

  const getData = async () => {
    setisRefresh(true);
    setPage(1);
    const res = await getListPartner({
      keyword,
      level,
      trader_account_status,
      platform: Platform.OS,
      page_size: 10,
      page_index: 1,
    });

    if ((res.data.code = 200 && res.data.data && res.data.data.length > 0)) {
      setData(res.data.data);
      setTotalPage(res.data.meta.pages);
    } else {
      setData([]);
    }
    setisRefresh(false);
  };

  const onRefresh = () => {
    getData();
  };

  const onLoadMore = () => {
    if (page < tottalPage) getDataLoadMore();
  };

  const getDataLoadMore = async () => {
    setisRefresh(true);
    const res = await getListPartner({
      keyword: '',
      level: 1,
      platform: Platform.OS,
      page_size: 10,
      page_index: page + 1,
    });
    setPage(page + 1);

    if (res.data.code == 200 && res.data.data && res.data.data.length > 0) {
      setData(data.concat(res.data.data));
    }
    setisRefresh(false);
  };

  return (
    <View style={{flex: 1}}>
      <HeaderPartner
        onOpenSearch={toggleModal}
        title={'MyPartner'}
        isWhite={true}
      />

      {data.length > 0 ? (
        <FlatList
          data={data}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item) => item.id}
          refreshing={isRefresh}
          onRefresh={() => onRefresh()}
          onEndReachedThreshold={0.01}
          onEndReached={(info) => {
            onLoadMore();
          }}
          renderItem={({item, index}) => (
            <Item isEnd={data.length - 1 == index ? true : false} item={item} />
          )}
        />
      ) : (
        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
          <AppText
            i18nKey={'NoData'}
            style={{
              fontSize: 18,
              fontWeight: 'bold',
            }}></AppText>
        </View>
      )}

      <SearchModal
        setKeyword={setKeyword}
        keyword={keyword}
        setLevel={setLevel}
        setTrader_account_status={setTrader_account_status}
        toggleModal={toggleModal}
        isModalVisible={isModalVisible}
      />
    </View>
  );
};

export default Level1;
