import "./index.less";
import Player from "../../components/Player";
import { useMount } from "../../hook";
import { Select, Message, Space, Tooltip } from "@arco-design/web-react";
const Option = Select.Option;
const options = ["全部", "最新的"];
import BsCard from "../../components/Card";
import TimeScroll from "../../components/TimeScroll";
import Tab20Regular from "@ricons/fluent/Tab20Regular";
import Table20Regular from "@ricons/fluent/Table20Regular";
import { useState } from "react";
import { recommendListDefault, courseTimeListDefault } from "./mock";

export default function Index() {
  useMount(() => {});

  const [actions, setActions] = useState([
    {
      key: "tab",
      icon: Tab20Regular,
      active: false,
      tip: "单格排列",
    },
    {
      key: "table",
      icon: Table20Regular,
      active: true,
      tip: "缩略",
    },
  ]);

  const [recommendList, setRecommendList] = useState(recommendListDefault);

  const [courseTimeList, setCourseTimeList] = useState(courseTimeListDefault);

  const onClickActionItem = (action: any) => {
    setActions((p) => p.map((a) => ({ ...a, active: a.key === action.key })));
  };

  return (
    <div className="container course">
      <div className="recommends">
        {recommendList.map((item, index) => (
          <BsCard {...item} key={index} />
        ))}
      </div>

      <div className="action-bar">
        <Select
          placeholder="排序规则"
          style={{ width: 154 }}
          onChange={(value) =>
            Message.info({
              content: `You select ${value}.`,
              showIcon: true,
            })
          }
        >
          {options.map((option, index) => (
            <Option key={option} disabled={index === 3} value={option}>
              {option}
            </Option>
          ))}
        </Select>
        <div className="table-action">
          {actions.map((action) => (
            <Tooltip key={action.key} content={action.tip}>
              <span
                className={action.active ? "active" : ""}
                onClick={() => onClickActionItem(action)}
              >
                <action.icon />
              </span>
            </Tooltip>
          ))}
        </div>
      </div>
      <div className="timeline">
        <div className="thumbnail">
          {courseTimeList.map((item, index) => (
            <section key={index}>
              <div className="time">
                {item.year}年{item.month}月
              </div>
              <div className="statistic">{item.data.length} 个视频</div>
              <div className="grid">
                {item.data.map((d: any) => (
                  <BsCard key={d.time} imgUrl={d.img} title={d.title} />
                ))}
              </div>
            </section>
          ))}
        </div>
        <TimeScroll className="timescroll" data={courseTimeList} />
      </div>
    </div>
  );
}