import { ComponentClass } from 'react';
import Taro, { Component, Config, useState } from '@tarojs/taro';
import { View, Text, ScrollView } from '@tarojs/components';
import { connect, useSelector } from '@tarojs/redux';

import OrderItem from '../components/OrderItem/OrderItem';

import './OrderList.scss';

import { fetchAllOrder } from '../../../api/order';
import { Customer } from '@/types/Customer/Customer';
import { shareHandle } from '@/common/shareMethod';
import RechargeItem from '../components/RechargeItem/RechargeItem';
import useRechargeOrders from './useRechargeOrders';
import useConsumeOrders from './useConsumeOrders';

type PageOwnProps = {};

type PageProps = PageOwnProps;

type PageState = {
  needRefresh: boolean;
};

interface OrderList {
  props: PageProps;
  state: PageState;
}

const OrderList = () => {
  // constructor(props: PageProps) {
  //   super(props);
  //   this.state = {
  //     needRefresh: false,
  //   };
  // }

  // componentWillMount() {
  //   this.getAllOrderHandle();
  // }
  // componentDidShow() {
  //   const { needRefresh } = this.state;
  //   if (needRefresh) {
  //     this.getAllOrderHandle();
  //   }
  // }

  const onPullDownRefresh = () => {
    console.log('in onPullDownRefresh');
    this.getAllOrderHandle().then(() => {
      Taro.stopPullDownRefresh();
    });
  };

  const goPayPage = data => {
    // this.setState({
    //   needRefresh: true,
    // });
    this.$preload({ id: data.id });
    Taro.navigateTo({
      url: '/pages/Order/OrderPay/OrderPay',
    });
  };
  const goDetail = data => {
    // this.setState({
    //   needRefresh: false,
    // });
    this.$preload(data);
    Taro.navigateTo({
      url: '/pages/Order/OrderDetail/OrderDetail',
    });
  };

  // const { allList } = useSelector(
  //   (state: { OrderList: OrderStoreState }) => state.OrderList,
  // );
  const userinfo = useSelector(
    (state: { userinfo: Customer }) => state.userinfo,
  );
  const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
  const [consumenLastId, setConsumenLastId] = useState(0);
  const consumeOrders = useConsumeOrders(
    userinfo.customerId,
    consumenLastId,
    10,
  );
  const fetchMoreConsumeOrders = () => {
    const itemIdx = consumeOrders.length - 1;
    const orderIdx = consumeOrders[itemIdx].data.length - 1;
    setConsumenLastId(consumeOrders[itemIdx].data[orderIdx].id);
  };

  const [rechargeLastId, setRechargeLastId] = useState(0);
  const rechargeOrders = useRechargeOrders(
    userinfo.customerId,
    rechargeLastId,
    10,
  );
  const fetchMoreRechargeOrders = () => {
    const itemIdx = rechargeOrders.length - 1;
    const orderIdx = rechargeOrders[itemIdx].data.length - 1;
    setRechargeLastId(rechargeOrders[itemIdx].data[orderIdx].id);
  };

  return (
    <View className='OrderList'>
      <View className='Tab'>
        <Text
          className={`Tab-item ${orderType === 0 ? 'active' : ''}`}
          onClick={() => setOrderType(0)}>
          消费
        </Text>
        <Text
          className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
          onClick={() => setOrderType(1)}>
          充值
        </Text>
      </View>
      {orderType === 0 ? (
        <ScrollView
          className='OrderList-Content'
          scrollY
          onScrollToUpper={() => setConsumenLastId(0)}
          onScrollToLower={fetchMoreConsumeOrders}
          upperThreshold={-100}
          lowerThreshold={70}
          scrollWithAnimation
          scrollTop={0}>
          {consumeOrders.map((allItem, index) => (
            <View key={allItem.groupName} className='OrderList-Group'>
              <View className='OrderList-GroupTitle'>
                <View className='OrderList-GroupName'>{allItem.groupName}</View>
                {index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
              </View>
              {allItem.data.map(order => (
                <OrderItem
                  key={order.id}
                  data={order}
                  onGoDetail={goDetail}
                  onPayHandle={goPayPage}
                />
              ))}
            </View>
          ))}
        </ScrollView>
      ) : (
        <ScrollView
          className='OrderList-Content'
          scrollY
          onScrollToUpper={() => setRechargeLastId(0)}
          onScrollToLower={fetchMoreRechargeOrders}
          upperThreshold={-100}
          lowerThreshold={70}
          scrollWithAnimation
          scrollTop={0}>
          {rechargeOrders.map(reChargeItem => (
            <View key={reChargeItem.groupName} className='OrderList-Group'>
              <View className='OrderList-GroupTitle'>
                <View className='OrderList-GroupName'>
                  {reChargeItem.groupName}
                </View>
                {/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
              </View>
              {reChargeItem.data.map(order => (
                <RechargeItem key={order.id} data={order} />
              ))}
            </View>
          ))}
        </ScrollView>
      )}
    </View>
  );
};
OrderList.config = {
  navigationBarTitleText: '订单',
  enablePullDownRefresh: true,
};
OrderList.onShareAppMessage = shareHandle;

export default OrderList;
