import React, { useState, useEffect, useRef } from "react";
import { View, Text, Button, Image, ScrollView } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import { Avatar, Dialog } from "@nutui/nutui-react-taro";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import classnames from "classnames";
import orderService, {
  OrderStatus,
  CancelType,
  refundTextMap,
} from "@/services/orderService";
import { getStorage, removeStorage, setStorage } from "@/store/storage";
import { useGlobalStore } from "@/store/global";
import { handleCustomerService } from "@/services/userService";
import { withAuth, RefundPopup, GeneralNavbar } from "@/components";
import { payOrder, generateOrderActions } from "@/utils";
import emptyContent from "@/static/emptyStatus/publish-empty.png";
import CustomerIcon from "@/static/order/customer.svg";
import { insertDotInTags } from "@/game_pages/detail/utils/helper";
import styles from "./index.module.scss";

dayjs.locale("zh-cn");

const PAGESIZE = 100;

const diffDayMap = new Map([
  [0, "今天"],
  [1, "明天"],
  [2, "后天"],
]);

const DayOfWeekMap = new Map([
  [0, "周日"],
  [1, "周一"],
  [2, "周二"],
  [3, "周三"],
  [4, "周四"],
  [5, "周五"],
  [6, "周六"],
]);

function generateTimeMsg(game_info) {
  const { start_time, end_time } = game_info;
  const startTime = dayjs(start_time);
  const endTime = dayjs(end_time);
  const diffDay = startTime.startOf("day").diff(dayjs().startOf("day"), "day");

  const dayofWeek = startTime.day();
  const gameLength = `${endTime.diff(startTime, "hour")}小时`;
  return (
    <>
      <Text>
        {diffDay <= 2 && diffDay >= 0
          ? diffDayMap.get(diffDay)
          : startTime.format("YYYY-MM-DD")}
      </Text>
      <Text>({DayOfWeekMap.get(dayofWeek)})</Text>
      <Text>{startTime.format("ah")}点</Text>
      <Text>{gameLength}</Text>
    </>
  );
}

const OrderList = () => {
  const [list, setList] = useState<any[][]>([]);
  const [total, setTotal] = useState(0);
  const refundRef = useRef(null);

  const end = list.length * PAGESIZE >= total;

  useEffect(() => {
    getOrders(1);
  }, []);

  useDidShow(() => {
    const targetPage = getStorage("list_reload_page_number");
    if (targetPage) {
      removeStorage("list_reload_page_number");
      getOrders(Number(targetPage));
    }
  });

  function addPageInfo(arr, page) {
    return arr.map((item) => ({ ...item, page }));
  }

  // clear 是否清除当前页后面的数据（如果有的话，没有也不影响）
  async function getOrders(page, clear = true) {
    const res = await orderService.getOrderList({ page, pageSize: PAGESIZE });
    if (res.code === 0) {
      setTotal(res.data.count);
      setList((prev) => {
        const newList = [...prev];
        const index = page - 1;
        newList.splice(
          index,
          clear ? newList.length - index : 1,
          addPageInfo(res.data.rows, page)
        );
        return newList;
      });
    }
  }

  function handleFetchNext() {
    console.log("scroll");
    if (!end) {
      getOrders(list.length + 1);
    }
  }

  async function handlePayNow(item) {
    try {
      const unPaidRes = await orderService.getUnpaidOrder(item.game_info?.id);
      if (unPaidRes.code === 0 && unPaidRes.data.has_unpaid_order) {
        await payOrder(unPaidRes.data.payment_params);
        getOrders(item.page, false);
      } else {
        throw new Error("支付调用失败");
      }
    } catch (e) {
      console.log(e, 1111);
      Taro.showToast({
        title: e.message,
        icon: "none",
      });
    }
  }

  function handleViewGame(gameId) {
    if (!gameId) {
      Taro.showToast({ title: "球局未找到", icon: "error" });
      return;
    }
    Taro.navigateTo({
      url: `/game_pages/detail/index?id=${gameId}&from=orderList`,
    });
  }

  async function handleDeleteOrder(item) {
    const { id: order_id } = item;
    // TODO：删除订单,刷新这一页，然后后面的全清除掉
    const onCancel = () => {
      Dialog.close("cancelOrder");
    };
    const onConfirm = async () => {
      try {
        const deleteRes = await orderService.deleteOrder({
          order_id,
        });
        if (deleteRes.code !== 0) {
          throw new Error(deleteRes.message);
        }
        getOrders(item.page);
        Taro.showToast({
          title: "删除成功",
          icon: "none",
        });
      } catch (e) {
        Taro.showToast({
          title: e.message,
          icon: "error",
        });
      } finally {
        Dialog.close("cancelOrder");
      }
    };
    Dialog.open("cancelOrder", {
      title: "确定删除订单吗？",
      content: (
        <View className={styles.cancelTip}>
          <Text>删除订单后，您将无法恢复订单。请确认是否继续取消？</Text>
        </View>
      ),
      footer: (
        <View className={styles.dialogFooter}>
          <Button className={styles.cancel} onClick={onCancel}>
            取消
          </Button>
          <Button className={styles.confirm} type="primary" onClick={onConfirm}>
            确认
          </Button>
        </View>
      ),
      onConfirm,
      onCancel,
    });
  }

  async function handleCancelOrder(item) {
    const { order_no } = item;
    const onCancel = () => {
      Dialog.close("cancelOrder");
    };
    const onConfirm = async () => {
      try {
        const cancelRes = await orderService.cancelUnpaidOrder({
          order_no,
          cancel_reason: "用户主动取消",
        });
        if (cancelRes.code !== 0) {
          throw new Error(cancelRes.message);
        }
        getOrders(item.page, false);
        Taro.showToast({
          title: "取消成功",
          icon: "none",
        });
      } catch (e) {
        Taro.showToast({
          title: e.message,
          icon: "error",
        });
      } finally {
        Dialog.close("cancelOrder");
      }
    };
    Dialog.open("cancelOrder", {
      title: "确定取消订单吗？",
      content: (
        <View className={styles.cancelTip}>
          <Text>取消订单后，您将无法恢复订单。请确认是否继续取消？</Text>
        </View>
      ),
      footer: (
        <View className={styles.dialogFooter}>
          <Button className={styles.cancel} onClick={onCancel}>
            取消
          </Button>
          <Button className={styles.confirm} type="primary" onClick={onConfirm}>
            确认
          </Button>
        </View>
      ),
      onConfirm,
      onCancel,
    });
  }

  function handleQuit(item) {
    if (refundRef.current) {
      refundRef.current.show(item, (result) => {
        if (result) {
          getOrders(item.page);
        }
      });
    }
  }

  function handleViewOrderDetail({ page, id: orderId }) {
    setStorage("list_reload_page_number", page);
    Taro.navigateTo({
      url: `/order_pages/orderDetail/index?id=${orderId}`,
    });
  }

  const flatList = list.flat();

  const { statusNavbarHeightInfo } = useGlobalStore();
  const { totalHeight } = statusNavbarHeightInfo;

  return (
    <View
      className={styles.container}
      style={{ paddingTop: `${totalHeight + 8}px` }}
    >
      <GeneralNavbar
        title="球局订单"
        backgroundColor="transparent"
        titleClassName={styles.titleClassName}
        className={styles.navbar}
      />
      <ScrollView
        scrollY
        scrollWithAnimation
        lowerThreshold={20}
        onScrollToLower={handleFetchNext}
        enhanced
        showScrollbar={false}
        className={styles.list}
      >
        {/* <View className={styles.bg} /> */}
        {flatList.map((item) => {
          const unPay =
            item.order_status === OrderStatus.PENDING &&
            item.cancel_type === CancelType.NONE;
          const canceled = [CancelType.USER, CancelType.TIMEOUT].includes(
            item.cancel_type
          );
          const { game_info } = item;

          const {
            skill_level_max,
            skill_level_min,
            play_type,
            participants,
            location_name,
            current_players,
            max_players,
            court_type,
          } = game_info || {};

          return (
            <View key={item.id} className={styles.orderItem}>
              <View
                className={styles.gameInfo}
                onClick={() => handleViewOrderDetail(item)}
              >
                <View className={styles.gameTitle}>
                  <View className={styles.title}>{item?.game_info?.title}</View>
                  {!canceled && (
                    <View
                      className={classnames(
                        styles.payNum,
                        styles[unPay ? "pending" : "paid"]
                      )}
                    >
                      <Text>
                        {unPay
                          ? "待支付"
                          : refundTextMap.get(item.refund_status)}
                      </Text>{" "}
                      ¥ <Text>{item.amount}</Text>
                    </View>
                  )}
                </View>
                <View className={styles.gameTime}>
                  {generateTimeMsg(item.game_info || {})}
                </View>
                <View className={styles.address}>
                  {insertDotInTags([location_name, court_type, "3.5km"]).map(
                    (text, index) => (
                      <Text key={index}>{text}</Text>
                    )
                  )}
                </View>
                <View className={styles.gameOtherInfo}>
                  {participants?.length >= 0 ? (
                    <View className={styles.avatarCards}>
                      {participants.map((participant) => {
                        const {
                          user: { avatar_url, id },
                        } = participant;
                        return (
                          <Image
                            className={styles.avatar}
                            mode="aspectFill"
                            key={id}
                            src={avatar_url}
                          />
                        );
                      })}
                    </View>
                  ) : (
                    ""
                  )}
                  <View className={styles.participantProgress}>
                    <Text className={styles.current}>
                      报名人数 {current_players}
                    </Text>
                    <Text>/</Text>
                    <Text>{max_players}</Text>
                  </View>
                  <View className={styles.levelReq}>
                    {skill_level_max !== skill_level_min
                      ? `${skill_level_min || "-"} 至 ${skill_level_max || "-"}`
                      : skill_level_min === 1
                      ? "无要求"
                      : `${skill_level_min} 以上`}
                  </View>
                  <View className={styles.playType}>{play_type}</View>
                </View>
              </View>
              <View className={styles.orderActions}>
                <View className={styles.extraActions}>
                  <View
                    className={styles.customer}
                    onClick={handleCustomerService}
                  >
                    <Image className={styles.customerIcon} src={CustomerIcon} />
                    <Text>客服</Text>
                  </View>
                </View>
                <View className={styles.mainActions}>
                  {generateOrderActions(
                    item,
                    {
                      handleDeleteOrder,
                      handleCancelOrder,
                      handleQuit,
                      handlePayNow,
                      handleViewGame,
                    },
                    "list"
                  )?.map((obj) => (
                    <View
                      className={classnames(
                        styles.button,
                        styles[obj.className]
                      )}
                    >
                      <Text className={styles.buttonText}>{obj.text}</Text>
                      <Button
                        className={styles.transparentButton}
                        onClick={obj.action}
                      >
                        {obj.text}
                      </Button>
                    </View>
                  ))}
                </View>
              </View>
            </View>
          );
        })}
        {flatList.length > 0 && end && (
          <View className={styles.endTips}>已经到底了～</View>
        )}
        {flatList.length === 0 && (
          <View className={styles.emptyNotice}>
            <Image mode="widthFix" src={emptyContent} />
            <Text className={styles.emptyTip}>暂时没有订单</Text>
          </View>
        )}
      </ScrollView>
      <Dialog id="cancelOrder" />
      <RefundPopup ref={refundRef} />
    </View>
  );
};

export default withAuth(OrderList);