import React, { useState, useEffect, useRef } from "react";
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 listIcon from "../../assets/icons/list.png";
import { connect } from "react-redux";
import _ from "lodash";
import scroll from "../../../utils/scroll.js";
import location from "../../../utils/location.js";
import { book, publicApi } from "../../redux/actions";
import Loader from "../../components/Loader";

function VodTube({
  selectedVideo,
  info,
  bookSection,
  loading,
  getInfo,
  categories,
  setVideoActive,
  allBooks,
  theme,
}) {
  const videoListTag = useRef(null);
  useEffect(() => {
    localStorage.setItem("scroll-list", "on");
    scroll.goToTop();
    getInfo({
      bookId: localStorage.getItem("bookId")
        ? localStorage.getItem("bookId")
        : localStorage.getItem("category")?.split(",")[0],
    });
  }, []);

  useEffect(() => {
    if (allBooks && localStorage.getItem("category")) {
      const cat = localStorage.getItem("category")?.split(",");
      bookSection({ bookId: cat[0], categoryId: cat[1] });
    }
  }, [allBooks]);

  const light = theme === "light";
  return (
    <>
      <div
        className={_.join(
          [
            "video-tube main d-flex flex-column",
            light ? "video-tube-light bg-white" : "video-tube-dark bg-black",
          ],
          " "
        )}
        style={{ filter: loading ? "blur(8px)" : "" }}
      >
        <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}
                posterId={selectedVideo?.posterId}
              />
              {/* <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">
                {info?.comments?.map((comment, i) => (
                  <Comment comment={comment} key={i} />
                ))}
              </div>
            </section>
            <section className="desktop video-tube__content--addComment">
              <AddComment theme={theme} />
            </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>
                    {localStorage.getItem("category")?.split(",")[1] ||
                      "لیست فیلم‌ها"}
                  </h2>
                  {/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
                </div>
                <img src={listIcon} alt="" />
              </header>
              <div
                ref={videoListTag}
                className="video-tube__sidebar--playlist___list d-flex flex-column"
                id="list"
              >
                {localStorage.getItem("bookId")
                  ? categories?.map((video, i) => (
                      <LessonPlayList theme={theme} category={video} key={i} />
                    ))
                  : info?.vods.map((video, i) => (
                      <LessonPlayList theme={theme} category={video} key={i} />
                    ))}
              </div>
            </section>
            {info?.attachments.length > 0 && (
              <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">
                  {info?.attachments?.map((file, i) => (
                    <Attachments file={file} key={i} />
                  ))}
                </div>
              </section>
            )}
            {info?.related && (
              <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">
                  {info?.related.slice(0, 3).map((item, i) => (
                    <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">
                {info?.comments?.map((comment, i) => (
                  <Comment comment={comment} key={i} />
                ))}
              </div>
            </section>
          </div>
          <section className="mobile video-tube__content--addComment">
            <AddComment />
          </section>
        </main>
      </div>
      {loading && (
        <div className="full-loader">
          <Loader size={50} />
        </div>
      )}
    </>
  );
}

export default connect(
  (state) => ({
    selectedVideo: state.publicApi.selectedVideo,
    info: state.publicApi.bookSection,
    loading: state.publicApi.loading,
    categories: state.publicApi.categories,
    allBooks: state.publicApi.bookInfo?.vods,
    theme: state.publicApi.theme,
  }),
  {
    getInfo: publicApi.bookInfo,
    getBookList: book.list,
    bookSection: publicApi.bookSection,
    setVideoActive: publicApi.setVideoActive,
  }
)(VodTube);