import { View } from "@tarojs/components";
import { FC, useDidShow } from "@tarojs/taro";
import { AtTabs, AtTabsPane } from "taro-ui";
import { useState } from "react";
import { Products } from "./components/Products";
import { Records } from "./components/Records";
import { getPointRecordListApi, getUserPointApi } from "../../../api";
import "./index.scss";

const ShopmallPage: FC = () => {
  const [curTab, setCurTab] = useState(0);
  const [point, setPoint] = useState<string | number>("--");
  const [recordList, setRecordList] = useState<any[]>([]);

  const handleTabClick = (idx: number) => {
    setCurTab(idx);

    if (idx === 1) {
      getPointRecordList();
    }
  };

  const getUserPoint = async () => {
    const data = await getUserPointApi();
    setPoint(data.total);
  };

  const getPointRecordList = async () => {
    const data = await getPointRecordListApi();
    setRecordList(data);
  };

  useDidShow(() => {
    getUserPoint();
  });

  return (
    <View className="shopmall">
      <View className="shopmall-banner">
        <View className="shopmall-banner__label">爱心币</View>
        <View className="shopmall-banner__count">{point}</View>
      </View>

      <View className="shopmall-main">
        <AtTabs
          current={curTab}
          scroll
          className="shopmall-tab"
          tabList={[{ title: "爱心币兑换" }, { title: "兑换记录" }]}
          onClick={handleTabClick}
        >
          {/* 爱心币兑换 */}
          <AtTabsPane current={curTab} index={0}>
            <Products curTab={curTab} point={point as number} />
          </AtTabsPane>

          {/* 兑换记录 */}
          <AtTabsPane current={curTab} index={1}>
            <Records list={recordList} />
          </AtTabsPane>
        </AtTabs>
      </View>
    </View>
  );
};

export default ShopmallPage;
