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

import "./index.scss";
import { DialogCalendarCard } from "@/components/index";
// import { CalendarUI } from "@/components";

const DownloadBill: React.FC = () => {
  const [dateRange, setDateRange] = useState({ start: "", end: "" });
  const [dateType, setDateType] = useState("week");
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    culculateDateRange(dateType);
  }, []);

  const culculateDateRange = (dateType: string) => {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const day = today.getDate();
    if (dateType === "week") {
      today.setDate(day - 6);
    } else if (dateType === "month") {
      today.setMonth(month - 1);
      today.setDate(day + 1);
    }
    const startYear = today.getFullYear();
    const startMonth = today.getMonth();
    const startDay = today.getDate();
    setDateRange({
      start: `${startYear}-${String(startMonth + 1).padStart(2, "0")}-${String(
        startDay
      ).padStart(2, "0")}`,
      end: `${year}-${String(month + 1).padStart(2, "0")}-${String(
        day
      ).padStart(2, "0")}`,
    });
  };

  const selectDateRange = (range: string) => {
    switch (range) {
      case "week":
        setDateType("week");
        culculateDateRange("week");
        break;
      case "month":
        setDateType("month");
        culculateDateRange("month");
        break;
      case "custom":
        setDateType("custom");
        setDateRange({ start: "", end: "" });
        setVisible(true);
        break;
    }
  };
  const [currentTimeValue, setCurrentTimeValue] = useState<Date | Date[]>(new Date());
  const handleConfirm = (val: Date[]) => {
    setCurrentTimeValue(val);
    const [start, end] = val;
    setDateRange({
      start: dayjs(start).format("YYYY-MM-DD"),
      end: dayjs(end).format("YYYY-MM-DD"),
    });
  };
  return (
    <View className="download_bill_page">
      <View className="hint_content">
        <Text>最长可导出三个月的账单 </Text>
        <Text className="button_text">示例文件</Text>
      </View>
      <View className="form_container">
        <View className="form_item">
          <Text className="title_text">接收方式</Text>
          <View className="value_content arrow">
            <Text>小程序消息</Text>
          </View>
        </View>
        <View className="form_item">
          <Text className="title_text">交易类型</Text>
          <View className="value_content arrow">
            <Text>全部</Text>
          </View>
        </View>
        <View className="form_item">
          <Text className="title_text">账单时间</Text>
          <View className="value_content">
            <View
              className={`option_button ${dateType === "week" ? "active" : ""}`}
              onClick={() => {
                selectDateRange("week");
              }}
            >
              近一周
            </View>
            <View
              className={`option_button ${
                dateType === "month" ? "active" : ""
              }`}
              onClick={() => {
                selectDateRange("month");
              }}
            >
              近一月
            </View>
            <View
              className={`option_button ${
                dateType === "custom" ? "active" : ""
              }`}
              onClick={() => {
                selectDateRange("custom");
              }}
            >
              自定义时间
            </View>
          </View>
        </View>
        {dateRange.start && dateRange.end && (
          <View className="time_box">
            <Text>{dateRange.start}</Text> 至 <Text>{dateRange.end}</Text>
          </View>
        )}
      </View>
      <View className="button_container">
        <Text
          className="button_text"
          onClick={() =>
            Taro.navigateTo({ url: "/user_pages/downloadBillRecords/index" })
          }
        >
          下载记录
        </Text>
        <Button className="download_button">下载</Button>
      </View>
      {visible && (
        <DialogCalendarCard
          visible={visible}
          searchType={"range"}
          value={currentTimeValue}
          onChange={handleConfirm}
          onClose={() => setVisible(false)}
        />
      )}
    </View>
  );
};

export default DownloadBill;