import "./index.less";
import Player from "../../components/Player";
import { useMount } from "../../hook";
import {
  Select,
  Message,
  Space,
  Tooltip,
  Dropdown,
  Button,
  Menu,
} from "@arco-design/web-react";
import BsCard from "../../components/Card";
import Timeline, { IOnScrollParam } from "./components/Timeline";
import Tab20Regular from "@ricons/fluent/Tab20Regular";
import Table20Regular from "@ricons/fluent/Table20Regular";
import Filter20Regular from "@ricons/fluent/Filter20Regular";
import { useRef, useState } from "react";
import { courseTimeListDefault } from "./mock";
import { Icon } from "@ricons/utils";

export default function Index() {
  const thumbnailRef = useRef<HTMLElement | null>(null);
  const scale = useRef<number>(1); // thumbnail / timeline 高度比例
  const [timeline, setTimeline] = useState({
    top: -4,
  });

  const dropList = (
    <Menu>
      <Menu.Item key="asec">升序</Menu.Item>
      <Menu.Item key="desc">降序</Menu.Item>
    </Menu>
  );

  const [actions, setActions] = useState([
    {
      key: "tab",
      icon: <Tab20Regular />,
      active: false,
      tip: "使用大缩略图显示单个项目",
      gridClass: "tab",
    },
    {
      key: "table",
      icon: <Table20Regular />,
      active: true,
      tip: "列出更多项目",
      gridClass: "table",
    },
  ]);

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

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

  /**
   * 右侧时间线滚动
   */
  const onTimelineScroll = (p: IOnScrollParam) => {
    const { top, height } = p;
    //左侧区域高度
    const { scrollHeight, clientHeight } = thumbnailRef.current!;
    scale.current = (scrollHeight - clientHeight) / height;
    thumbnailRef.current!.scrollTop = top * scale.current;
  };

  /**
   * 左侧缩略图预览区域滚动
   */
  const onThumbnailScroll = () => {
    const { scrollHeight, scrollTop } = thumbnailRef.current!;
    const isTop = scrollTop === 0;
    const isBottom = scrollTop === scrollHeight;
    const top = isTop ? -4 : scrollTop / scale.current; // 修正顶部
    setTimeline({ top });
  };

  return (
    <div className="container course">
      <div className="action-bar">
        <Space>
          {actions.map((action) => (
            <Tooltip key={action.key} content={action.tip}>
              <Button
                type="text"
                onClick={() => onClickActionItem(action)}
                icon={
                  <Icon
                    size={20}
                    color={
                      action.active
                        ? "rgb(var(--primary-6))"
                        : "var(--color-text-2)"
                    }
                  >
                    {action.icon}
                  </Icon>
                }
              />
            </Tooltip>
          ))}
          <Dropdown droplist={dropList} position="bl">
            <Button
              type="text"
              icon={
                <Icon size={20} color="var(--color-text-2)">
                  <Filter20Regular />
                </Icon>
              }
            />
          </Dropdown>
        </Space>
      </div>
      <div className="thumbnail-timeline">
        <div className="thumbnail-container">
          <article ref={thumbnailRef} onScroll={onThumbnailScroll}>
            {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 ${actions.find((a) => a.active)?.gridClass}`}
                >
                  {item.data.map((d: any) => (
                    <BsCard key={d.time} imgUrl={d.img} title={d.title} />
                  ))}
                </div>
              </section>
            ))}
          </article>
        </div>
        <Timeline
          className="timeline-container"
          data={courseTimeList}
          onScroll={onTimelineScroll}
          model={{ top: timeline.top }}
        />
      </div>
    </div>
  );
}
