import { useSelector } from '@tarojs/redux';
import { Customer } from '@/types/Customer/Customer';
import { useCallback, useEffect, useState } from '@tarojs/taro';
import { fetchAppointmentList, AppointOrder } from '@/api/washingMachine';

const initList: AppointOrder[] = [];

const useAppointList = (
  pageNum: number,
): [AppointOrder[], (pageNum: number) => void] => {
  const [list, setList] = useState(initList);
  const userInfo = useSelector(
    (state: { userinfo: Customer }) => state.userinfo,
  );
  const fetchHandle = useCallback(
    (pageNum: number) =>
      fetchAppointmentList({
        customerId: userInfo.customerId,
        pageNum,
      })
        .then(res => {
          console.log(res);
          if (pageNum) {
            setList([...list, ...res.data]);
          } else {
            setList(res.data);
          }
        })
        .catch(err => {
          console.log(err);
        }),
    [userInfo.customerId],
  );

  useEffect(() => {
    fetchHandle(pageNum);
  }, [pageNum]);
  return [list, fetchHandle];
};

export default useAppointList;
