import React, { useEffect, useState } from "react";
import { View, Text } from "@tarojs/components";
import { useRouter } from '@tarojs/taro';
import dayjs from 'dayjs';
import Taro from '@tarojs/taro';

import httpService from "@/services/httpService";
import { TransactionType, TransactionSubType } from "@/user_pages/wallet/index";
import "./index.scss";

enum FreezeActions {
  Unfreeze = "unfreeze",
  Freeze = "freeze",
}

interface BillDetail {
  id?: number;
  transaction_type?: TransactionType;
  transaction_sub_type?: TransactionSubType;
  freeze_action?: FreezeActions;
  amount?: number;
  description?: string;
  related_id?: number;
  create_time?: string;
  order_no?: string;
  game_title?: string;
  order_amount?: number;
  type_text?: string;
  sub_type_text?: string;
  amount_yuan?: string;
}

const BillDetail: React.FC = () => {
  const router = useRouter();
  const { id } = router.params;
  const [billDetail, setBillDetail] = useState<BillDetail>({});

  const getBillDetail = async () => {
    try {
      const res = await httpService.post<BillDetail>("/wallet/transaction_detail", { transaction_id: id })
      if (res.code === 0) {
        setBillDetail(res.data);
      }
    } catch (error) {
      console.log(error);
    }

  };

  const copyText = (text: string | undefined) => {
    if (!text) {
      return;
    }
    Taro.setClipboardData({
      data: text,
      success: () => {
        Taro.showToast({
          title: '复制成功',
          icon: 'none'
        });
      }
    });
  };

  useEffect(() => {
    getBillDetail();
  }, [id]);
  return (
    <View className="bill-detail-page">
      <View className="title-text-box">
        <View className="title-text">现金交易 (元)</View>
        <View className="amount-text">
          <Text>{billDetail.transaction_type === 'expense' ? '-' : '+'}</Text>
          <Text>{billDetail.amount_yuan}</Text>
        </View>
      </View>
      <View className="detail-wrapper">
        <View className="detail-item">
          <Text>交易时间</Text>
          <Text>{billDetail.create_time && dayjs(billDetail.create_time).format('YYYY-MM-DD HH:mm:ss')}</Text>
        </View>
        <View className="detail-item">
          <Text>活动标题</Text>
          <Text>{billDetail.game_title}</Text>
        </View>
        <View className="detail-item">
          <Text>现金余额</Text>
          <Text>¥{billDetail.amount}</Text>
        </View>
        <View className="detail-item">
          <Text>商户单号</Text>
          <View className="with-btn-box">
            <Text>{billDetail.order_no}</Text>
            <Text className="btn" onClick={() => copyText(billDetail.order_no)}>复制</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default BillDetail;