import React, { useEffect } from "react";
import Navbar from "../../components/Navbar/index";
import Footer from "../../views/Home/Footer/index";
import LessonPlayList from "./LessonPlayList/index";
import Attachments from "./Attachments/index";
import Book from "./Book/index";
import Comment from "./Comment/index";
import AddComment from "./AddComment/index";
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 } from "../../redux/actions";

function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
  useEffect(() => {
    getList();
    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 />
            <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">
              {videoList.lessons?.map((lesson: any, i: any) => (
                <LessonPlayList lesson={lesson} 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,
  }),
  { getList: book.list }
)(VodTube);
