"use client";
import React, { useState, useCallback, useEffect } from "react";
import TopTabs from "../components/public/TopTabs";
import Pagination from "../components/public/Pagination";
import CoursesList from "../components/courses/CoursesList";
import * as coursesAPI from "../apis/coursesAPI";
import { useSessionStorage } from "react-use";
import PopularCourses from "../components/courses/PopularCourses";
import PopularCourseAlbums from "../components/courses/PopularCourseAlbums";
import { useParams, useNavigate } from "react-router-dom";
import { ConfigProvider, DatePicker, message } from "antd";
import zhCN from "antd/locale/zh_CN";
import { ArrowLeftIcon } from "@radix-ui/react-icons";

// import * as Select from '@radix-ui/react-select';
// import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
export default function CourseAlbumAllListPage() {
  const { token, subsetTab } = useParams();

  const [kToken, setKToken] = useSessionStorage("token", token);
  const navigate = useNavigate();

  // 在浏览器会话缓存中存页面状态
  const [intPage, setIntPage] = useSessionStorage("currentPage", 1);

  /// 当前路由
  const [coursesData, setCoursesData] = useState(null);
  const [currentPage, setCurrentPage] = useState(intPage);
  const [searchInput, setSearchInput] = useState("");
  const [isSearch, setSearchButton] = useState(false);

  // const tabsList = ["首页", "产筛", "急诊重症", "学术", "学术峰会", "麻醉", "规培", "质控"];

  /// 获取课程数据
  const getCourses = useCallback(async () => {
    const data = await coursesAPI.fetchCoursesData(
      "",
      currentPage,
      subsetTab,
      searchInput
    );
    const coursesDataList = data.result;
    setCoursesData(coursesDataList);
  }, [subsetTab, currentPage, searchInput]);
  // 返回课程列表
  const handleBackToCourseList = () => {
    navigate(-1);
    setIntPage(1);
  };
  // 返回按钮
  function buildRouterBackIcon() {
    return (
      <button
        className="mb-3 w-10 h-10 text-sm rounded border md:border-0 md:hover:border border-gray-400"
        onClick={handleBackToCourseList}
      >
        <center>
          <ArrowLeftIcon className="text-gray-600 w-5 h-5" />
        </center>
      </button>
    );
  }
  // 关键字
  const handleSearchChange = (event) => {
    setSearchInput(event.target.value);
  };

  useEffect(() => {
    getCourses();
  }, [getCourses]);
  // 根据关键字搜索
  const handleSearch = () => {
    setSearchButton(!isSearch);
  };

  // 当前页码改变时
  const onPageChange = (newPage) => {
    setIntPage(newPage);
    setCurrentPage(newPage);
    setSearchInput("");
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-5 md:p-5">
      {buildCoursesList()}
    </main>
  );

  // 构建课程列表【带分页】
  function buildCoursesList() {
    if (!coursesData) {
      return <div>loading...</div>;
    }

    return (
      <div className="flex-grow flex flex-col items-center w-full ">
        <div className="flex flex-col flex-grow w-full md:rounded shadow-lg p-5 bg-white">
          {buildRouterBackIcon()}

          <div className="flex items-center justify-center ">
            <div className="search-bar bg-blue-500 hover:bg-blue-600 rounded-lg overflow-hidden shadow  flex items-center ">
              <div className="bg-white rounded-l-lg flex items-center h-10 ">
                <input
                  type="text"
                  placeholder={subsetTab === "course" ? "搜索课程" : "搜索专辑"}
                  value={searchInput}
                  onChange={handleSearchChange}
                  className=" px-2 py-1 mr-2 flex-grow md:min-w-[300px] md:flex-grow-0 bg-transparent  focus:outline-none w-full border-l border-l-[width]"
                />
              </div>

              <button
                className="search-bar-button border-none outline-none flex items-center justify-center px-4 w-20"
                onClick={handleSearch}
              >
                <span className="text-white font-medium">搜索</span>
              </button>
            </div>
          </div>
          <div className="h-5 md:h-8"></div>
          {coursesData == null ? (
            <div>暂无数据</div>
          ) : (
            <div className="flex flex-col flex-grow w-full">
              <div className="flex flex-col flex-grow w-full h-full">
                <div className="flex flex-col flex-grow mb-5 md:px-[5vw]">
                  <CoursesList
                    coursesData={coursesData.PageData}
                    subsetTab={subsetTab}
                    getCourses={getCourses}
                  />
                </div>
                <div className="mb-10"></div>
                <Pagination
                  totalItems={coursesData.TotalCount}
                  itemsPerPage={coursesData.PageSize}
                  currentPage={currentPage}
                  onPageChange={onPageChange}
                />
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}
