import { useEffect, useState } from "react";
import "./index.less";
import { ResizeBox, Space, Result, Button } from "@arco-design/web-react";
import { Icon } from "@ricons/utils";
import "react-perfect-scrollbar/dist/css/styles.css";
import PerfectScrollbar from "react-perfect-scrollbar";
import Material from "./components/Material";
import { useMount } from "../../hook";
import Player from "./components/DPlayer";

function CourseDetail() {
  const [toc, setToc] = useState([
    {
      title: "准备",
      level: 1,
    },
    {
      title: "资料下载",
      level: 2,
      active: false,
      view: <Material />,
    },
    {
      title: "学习 html, css, javascript 前的准备",
      level: 2,
      time: "3:23",
      active: false,
      view: (
        <Player
          video={{
            url: "https://1500018521.vod2.myqcloud.com/a28b6648vodtranssh1500018521/3fb96ced243791579995468466/adp.10.m3u8",
            pic: "https://1500018521.vod2.myqcloud.com/a28b6648vodtranssh1500018521/3fb96ced243791579995468466/coverBySnapshot_10_0.jpg",
          }}
        />
      ),
    },
    {
      title: "Vite + React + TS - Google Chrome 2023-02-15 09-55-08",
      level: 2,
      time: "4:13",
      active: false,
      view: (
        <Player
          video={{
            url: "https://1500018521.vod2.myqcloud.com/a28b6648vodtranssh1500018521/29226db4243791580097740418/adp.10.m3u8",
            pic: "https://1500018521.vod2.myqcloud.com/a28b6648vodtranssh1500018521/29226db4243791580097740418/coverBySnapshot/coverBySnapshot_10_0.jpg",
          }}
        />
      ),
    },
    {
      title: "使用CSS",
      level: 1,
    },
    {
      title: "使用 css：行内样式",
      level: 2,
      time: "5:55",
      active: false,
    },
    {
      title: "使用 css：行内样式2",
      level: 2,
      time: "6:55",
      active: false,
    },
  ]);

  const [view, setView] = useState<any>(null);
  const notFound = (
    <Result
      status="403"
      subTitle="无权访问"
      extra={<Button type="text">订阅</Button>}
    ></Result>
  );

  useMount(() => {
    const first = toc.find((t) => t.level === 2) as any;
    setToc((p: any) =>
      p.map((i: any) => ({ ...i, active: i.title === first.title }))
    );
    setView(first?.view);
  });

  const onclickItem = (i: any) => {
    setToc((t: any) =>
      t.map((p: any) => ({ ...p, active: i.title === p.title }))
    );
    setView(i.view ?? notFound);
  };

  return (
    <div className="course-detail">
      <ResizeBox.Split
        direction="horizontal"
        style={{ height: "calc(100vh - 60px)" }}
        max={0.9}
        min={0.1}
        size={0.2}
        panes={[
          <PerfectScrollbar>
            <aside>
              <h2>基础架构：一条SQL查询语句是如何执行的？</h2>
              <div>
                <Space style={{ color: "var(--color-text-3)" }}>
                  <span>2023年3月2日</span>
                </Space>
              </div>
              <div className="toc">
                {toc.map((i) => {
                  if (i.level === 1) {
                    return (
                      <div className="level-1" key={i.title}>
                        {i.title}
                      </div>
                    );
                  } else if (i.level === 2) {
                    return (
                      <div
                        className={`level-2 ${i.active ? "active" : ""}`}
                        key={i.title}
                        onClick={() => onclickItem(i)}
                      >
                        <span className="bs-ellipsis">{i.title}</span>
                        <span className="time">{i.time}</span>
                      </div>
                    );
                  }
                })}
              </div>
            </aside>
          </PerfectScrollbar>,
          <article>
            <main>{view}</main>
          </article>,
        ]}
      />
    </div>
  );
}

export default CourseDetail;
