import React from "react";
import { useState, useEffect } from "react";
import { View, Text, Picker } from "@tarojs/components";
import dayjs from "dayjs";

const TimeSelector = (props: any) => {
  let {
    data,
    hook,
    isOpened,
    onItemClick,
    chooseDate,
    changeActiveIndex,
    activeIndex,
  } = props;
  console.log("sjfksjkdfjk", activeIndex, data, hook, isOpened, onItemClick);
  if (!onItemClick) {
    onItemClick = () => {};
  }
  const { mode = "week", nowChooseDate } = hook || {};
  const [nowMonth, setNowMonth] = useState<string>(
    `${dayjs().year()}年 ${dayjs().month() + 1}月`
  );
  const [isOpen, setIsOpen] = useState(isOpened);
  useEffect(() => {
    setIsOpen(isOpened);
  }, [mode]);

  const dateChange = (value: any) => {
    let date = dayjs(value).toDate();
    chooseDate(date);
    // 设置月份选择值为选择月份-页面显示值
    setNowMonth(`${dayjs(date).year()}年 ${dayjs(date).month() + 1}月`);
    // 设置每月天所在位置-activeIndex，不是当月默认1号，当月默认当天
    if (
      dayjs(date).year() == dayjs().year() &&
      dayjs(date).month() == dayjs().month()
    ) {
      changeActiveIndex(dayjs().date());
    } else {
      const firstDayWeek = new Date(
        `${dayjs(date).year()}/${dayjs(date).month() + 1}/1`
      ).getDay();
      // 如果第一天为0，即周天
      const temp = firstDayWeek != 0 ? firstDayWeek : 7;
      console.log("temp :>> ", temp);
      changeActiveIndex(temp - 1);
    }
  };

  const changeOpen = () => {
    setIsOpen(!isOpen);
  };

  // 获取今天在所有dayNode中的下标
  const goToday = () => {
    // 设置月份选择默认值-picker
    chooseDate(new Date());
    // 设置月份选择值为今天所在月份-页面显示值
    setNowMonth(
      `${dayjs(new Date()).year()}年 ${dayjs(new Date()).month() + 1}月`
    );
    // 设置今天所在位置-activeIndex
    changeActiveIndex(dayjs().date());
  };

  const chooseDay = (item: any) => {
    console.log("988==>", item);
    changeActiveIndex(item.day);
  };

  return (
    <View className="TimeSelector">
      <View className="calendarBox">
        <View className="calendarTitle">
          {mode === "week" && (
            <Picker
              mode="date"
              fields="month"
              value={dayjs(nowChooseDate).format("YYYY-MM")}
              onChange={(e: any) => {
                dateChange(e.target.value);
              }}
            >
              <View className="dateText">
                {nowMonth}
                <Text className="triangleDown"></Text>
              </View>
            </Picker>
          )}
          {mode === "month" && <View className="dateText">{nowMonth}</View>}
          {mode === "week" && (
            <View className="oprateText">
              <Text onClick={changeOpen} className="open">
                {isOpen ? "收起" : "展开"}
              </Text>
              <Text onClick={goToday}>回到今天</Text>
            </View>
          )}
        </View>
        <View className="dateNodeBox">
          <View className="weekBox">
            <View className="weekNode">一</View>
            <View className="weekNode">二</View>
            <View className="weekNode">三</View>
            <View className="weekNode">四</View>
            <View className="weekNode">五</View>
            <View className="weekNode">六</View>
            <View className="weekNode">日</View>
          </View>
          <View className="dayNodeBox">
            {data &&
              data.slice(0, isOpen ? data.length : 7).map((item) => {
                return (
                  <View
                    className="dayNode"
                    key={item.day}
                    onClick={
                      mode === "week"
                        ? () => chooseDay(item)
                        : () => onItemClick(item)
                    }
                  >
                    {item.day && (
                      <View
                        className={`day ${
                          activeIndex == item.day ? "active" : ""
                        }`}
                      >
                        {item.day}
                        {item.num != 0 && activeIndex !== item.day && (
                          <Text className="point"></Text>
                        )}
                      </View>
                    )}
                    <View className="num">{`${
                      item.num != 0 && item.day ? `${item.num}场` : ""
                    }`}</View>
                  </View>
                );
              })}
          </View>
        </View>
      </View>
    </View>
  );
};

TimeSelector.config = {
  backgroundTextStyle: "light",
  enablePullDownRefresh: false,
  backgroundColor: "#3387ff",
  onReachBottomDistance: 50,
  navigationBarTitleText: "投资管理平台",
};

export default TimeSelector;