import React, { useEffect } from "react";
import Navbar from "../../components/Navbar";
import Footer from "../Home/Footer";
import LessonPlayList from "./LessonPlayList";
import Attachments from "./Attachments";
import Book from "./Book";
import Comment from "./Comment";
import AddComment from "./AddComment";
import Video from "../../components/JolPlayer";

import "./index.scss";
import listIcon from "../../assets/icons/list.png";
import { connect } from "react-redux";
import scroll from "../../util/scroll.js";
import { book, publicApi } from "../../redux/actions";

function VodTube({
  videoList,
  getBookList,
  list,
  selectedVideo,
  comments,
  info,
  getInfo,
}: any) {
  useEffect(() => {
    getBookList();
    // getInfo({
    //   bookId: 1,
    //   // window.location.pathname.slice(
    //   //   window.location.pathname.lastIndexOf("/") + 1,
    //   //   window.location.pathname.length
    //   // ),
    // });
    scroll.goToTop();
  }, []);
  
  return (
    <div className="video-tube main d-flex flex-column">
      <Navbar />
      <main className="d-flex">
        <div className="video-tube__content d-flex flex-column">
          <section className="video-tube__content--display d-flex flex-column">
            {/* <video controls>
              <source src={selectedVideo.src} />
            </video> */}
            <Video fileIds={selectedVideo?.fileIds} />
            <span className="desktop">درس دوم / بیست و یکم</span>
            <h1 className="desktop">{selectedVideo?.name}</h1>
            {/* <p className="desktop">{selectedVideo.text}</p> */}
          </section>
          <section className="desktop video-tube__content--comments flex-column">
            <header className="d-flex justify-content-between align-items-center">
              <h2>نظرات</h2>
              <button>بستن نظرات</button>
            </header>
            <div className="video-tube__content-comments___list d-flex flex-column">
              {comments?.map((comment: any, i: any) => (
                <Comment comment={comment} key={i} />
              ))}
            </div>
          </section>
          <section className="desktop video-tube__content--addComment">
            <AddComment />
          </section>
        </div>
        <div className="video-tube__sidebar d-flex flex-column">
          <section className="video-tube__sidebar--playlist d-flex flex-column">
            <header className="d-flex justify-content-between align-items-center">
              <div className="d-flex flex-column">
                <h2>{videoList.name}</h2>
                <p>در این قسمت توضیحی کوتاه قرار می گیرد</p>
              </div>
              <img src={listIcon} alt="" />
            </header>
            <div className="video-tube__sidebar--playlist___list d-flex flex-column">
              {info?.vods.map((video: any, i: any) => (
                <LessonPlayList video={video} key={i} num={i + 1} />
              ))}
            </div>
          </section>
          <section className="video-tube__sidebar--attachments d-flex flex-column">
            <header className="d-flex align-items-center">
              <div className="d-flex flex-column">
                <h2>فایل پیوست تمارین این فصل</h2>
                <p>در این قسمت توضیحی کوتاه قرار می گیرد</p>
              </div>
            </header>
            <div className="video-tube__sidebar--attachments___list d-flex flex-column">
              {videoList.attachments?.map((file: any, i: any) => (
                <Attachments file={file} key={i} />
              ))}
            </div>
          </section>
          <section className="video-tube__sidebar--suggests d-flex flex-column">
            <header className="d-flex justify-content-between align-items-center">
              <h2>پیشنهاد دانوین برای شما</h2>
              <span>تا 50% تخفیف </span>
            </header>
            <div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center">
              {list?.slice(0, 3).map((item: any, i: any) => (
                <Book data={item} key={i} />
              ))}
            </div>
          </section>
          <section className="mobile video-tube__content--comments flex-column">
            <header className="d-flex justify-content-between align-items-center">
              <h2>نظرات</h2>
              <button>بستن نظرات</button>
            </header>
            <div className="video-tube__content-comments___list d-flex flex-column">
              {comments?.map((comment: any, i: any) => (
                <Comment comment={comment} key={i} />
              ))}
            </div>
          </section>
        </div>
        <section className="mobile video-tube__content--addComment">
          <AddComment />
        </section>
      </main>
      <Footer />
    </div>
  );
}

export default connect(
  (state: any) => ({
    videoList: state.book.mockVideoList,
    selectedVideo: state.book.selectedVideo,
    list: state.book.list,
    comments: state.book.comments,
    info: state.book.info,
  }),
  { getInfo: publicApi.bookInfo, getBookList : book.list }
)(VodTube);
