import React, {useState, useEffect} from 'react';
import {
  getListCategoryProduct,
  getTransactionListByCategory,
} from '../../../apis/Functions/Transaction';
import PriceListView from './PriceListView';
import I18n from '../../../helper/i18/i18n';
import {Alert, Platform} from 'react-native';
import {showAlert, TYPE} from '../../../components/DropdownAlert';

const PriceList = (props) => {
  const [selected, setSelected] = useState('');
  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);
  const [tottalPage, setTotalPage] = useState(1);
  const [isRefresh, setIsRefresh] = useState(false);
  const [filters, setFilters] = useState([]);
  const [filterId, setFilterId] = useState(-1);

  useEffect(() => {
    getCategoryData();
  }, []);
  useEffect(() => {
    setData([]);
    getData();
  }, [filterId]);

  const getCategoryData = async () => {
    // setIsRefresh(true);
    const res = await getListCategoryProduct({
      keyword: '',
      platform: Platform.OS,
      page_size: 20,
      page_index: 1,
      type: 'PRODUCT',
    });
    if ((res.data.code = 200 && res.data.data)) {
      let data = [];
      data.push({id: -1, name: 'All'});
      setFilters(data.concat([...res.data.data]));
    } else {
      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
    }
  };

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

  const getData = async () => {
    setIsRefresh(true);
    setPage(1);
    const res = await getTransactionListByCategory({
      keyword: '',
      platform: Platform.OS,
      page_size: 10,
      page_index: 1,
      type: 'PRICE_TABLE',
      category_id: filterId,
    });
    setIsRefresh(false);
    console.log('getData', res);
    if ((res.data.code = 200 && res.data.data)) {
      setData(res.data.data);
      setTotalPage(res.data.meta.pages);
    } else {
      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
    }
  };

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

  const getDataLoadMore = async () => {
    setIsRefresh(true);
    const res = await getTransactionListByCategory({
      keyword: '',
      platform: Platform.OS,
      page_size: 10,
      page_index: page + 1,
      type: 'PRICE_TABLE',
      category_id: filterId,
    });
    setPage(page + 1);
    if (res.data.code == 200) {
      setData(data.concat(res.data.data));
    }
    setIsRefresh(false);
  };

  return (
    <PriceListView
      onRefresh={onRefresh}
      isRefresh={isRefresh}
      onLoadMore={onLoadMore}
      setFilterId={setFilterId}
      filterId={filterId}
      filters={filters}
      data={data}
    />
  );
};

export default PriceList;
