import { useState, useEffect } from "react";
import { PullToRefresh, Skeleton } from "antd-mobile";
import { sleep } from "antd-mobile/es/utils/sleep";
import styles from "./index.module.scss";
import { course } from "../../api/index";
import { Empty } from "../../components";
import { CoursesModel } from "./compenents/courses-model";
import moment from "moment";

const StudyPage = () => {
  const [loading, setLoading] = useState(false);
  const [todayCourses, setTodayCourses] = useState<CourseModel[]>([]);
  const [yesterdayCourses, setYesterdayCourses] = useState<CourseModel[]>([]);
  const [courses, setCourses] = useState<CourseModel[]>([]);

  useEffect(() => {
    document.title = "最近学习";
  }, []);

  useEffect(() => {
    setLoading(true);
    getCourses();
  }, []);

  const getCourses = () => {
    course
      .latestLearn()
      .then((res: any) => {
        let data = res.data;
        let today: CourseModel[] = [];
        let yesterday: CourseModel[] = [];
        let box: CourseModel[] = [];
        if (data && data.length > 0) {
          data.map((item: any) => {
            let time = moment(item.hour_record.updated_at)
              .utcOffset(0)
              .format("YYYY-MM-DD HH:mm:ss");
            if (moment(time).isSame(moment(), "day")) {
              today.push(item);
            } else if (
              moment(time).isSame(moment().subtract(1, "day"), "day")
            ) {
              yesterday.push(item);
            } else {
              box.push(item);
            }
          });
        }
        setTodayCourses(today);
        setYesterdayCourses(yesterday);
        setCourses(box);
        setLoading(false);
      })
      .catch((e) => {
        setLoading(false);
      });
  };

  return (
    <div className="main-body">
      <div className={styles["title"]}>最近学习</div>
      <div className="float-left" style={{ position: "relative" }}>
        <PullToRefresh
          onRefresh={async () => {
            setLoading(true);
            await sleep(700);
            getCourses();
          }}
        >
          <div className={styles["list-box"]}>
            {loading &&
              Array.from({ length: 2 }).map((_, i) => (
                <div className={styles["item"]} key={i}>
                  <Skeleton
                    animated
                    style={{
                      width: 100,
                      height: 75,
                      borderRadius: 8,
                      marginRight: 15,
                    }}
                  />
                  <div className={styles["item-info"]}>
                    <Skeleton animated style={{ width: "100%", height: 21 }} />
                    <Skeleton animated style={{ width: "100%", height: 24 }} />
                  </div>
                </div>
              ))}
            {!loading &&
              courses.length === 0 &&
              todayCourses.length === 0 &&
              yesterdayCourses.length === 0 && <Empty></Empty>}
            {!loading && (
              <>
                {todayCourses.length > 0 && (
                  <>
                    <div className={styles["label"]}>今日</div>
                    {todayCourses.map((item: any, index: number) => (
                      <div key={index} style={{ width: "100%" }}>
                        {item.course && (
                          <CoursesModel
                            id={item.course.id}
                            title={item.course.title}
                            thumb={item.course.thumb}
                            isRequired={item.course.is_required}
                            record={item.record}
                          ></CoursesModel>
                        )}
                      </div>
                    ))}
                  </>
                )}
                {yesterdayCourses.length > 0 && (
                  <>
                    <div className={styles["label"]}>昨日</div>
                    {yesterdayCourses.map((item: any, index: number) => (
                      <div key={index} style={{ width: "100%" }}>
                        {item.course && (
                          <CoursesModel
                            id={item.course.id}
                            title={item.course.title}
                            thumb={item.course.thumb}
                            isRequired={item.course.is_required}
                            record={item.record}
                          ></CoursesModel>
                        )}
                      </div>
                    ))}
                  </>
                )}
                {courses.length > 0 && (
                  <>
                    <div className={styles["label"]}>更早</div>
                    {courses.map((item: any, index: number) => (
                      <div key={index} style={{ width: "100%" }}>
                        {item.course && (
                          <CoursesModel
                            id={item.course.id}
                            title={item.course.title}
                            thumb={item.course.thumb}
                            isRequired={item.course.is_required}
                            record={item.record}
                          ></CoursesModel>
                        )}
                      </div>
                    ))}
                  </>
                )}
              </>
            )}
          </div>
        </PullToRefresh>
      </div>
    </div>
  );
};

export default StudyPage;
