import React, { useEffect } from "react";
import { connect } from "react-redux";
// import { publicApi } from "../../../redux/actions";
import { Link } from "react-router-dom";
import _ from 'lodash';

function LessonPlayList({
  category,
  selectedVideo,
  setVideoActive,
  catergories,
  realCategories,
  vods,
  theme,
}) {
  const bookId = localStorage.getItem("bookId");
  useEffect(() => {
    if (localStorage.getItem("scroll-list") && vods) {
      const list = document.getElementById("list");
      const listItem = document.getElementById(
        "listItem" + selectedVideo?.id
      );
      const elementHeight = (listItem)?.offsetHeight;
      const listHeight = (list).offsetHeight;
      const index = vods?.findIndex(
        (item) => item?.name === selectedVideo?.name
      );
      console.log(index);
      console.log(listHeight, elementHeight * (Number(index) + 1));

      if (elementHeight * (Number(index) + 1) > listHeight) {
        list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight);
      }
      localStorage.removeItem("scroll-list");
    }
  }, [vods]);

  const light = theme === "light";
  return (
    <>
      {
        <div
          className={_.join(
            [
              "lesson-playlist d-flex flex-column",
              light ? "lesson-playlist-light" : "lesson-playlist-dark",
            ],
            " "
          )}
        >
          {bookId && (
            <header>
              <h3>
                {
                  realCategories.filter(
                    (item) => item.id === category[0].categoryId
                  )[0].name
                }
              </h3>
              <span></span>
            </header>
          )}

          {bookId ? (
            category.map((video, i) => (
              <Link
                to={"/video/" + video.id}
                className={
                  "lesson-playlist__item d-flex align-items-center" +
                  " " +
                  (video?.id === selectedVideo?.id &&
                    "lesson-playlist__item--active")
                }
                key={i}
                id={"listItem" + video.id}
                onClick={() => setVideoActive(video)}
              >
                <span className="lesson-playlist__item--count">
                  {Number(i) + 1}
                </span>
                <div className="lesson-playlist__item--video">
                  {/* <video>
                  <source
                    src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
                  />
                </video> */}
                  <img
                    src={`https://dnvn.ir/api/v1/file/${video.posterId}`}
                    alt=""
                  />
                  <span>22:05</span>
                </div>
                <div className="lesson-playlist__item--text d-flex flex-column">
                  <h4>{video.name}</h4>
                  {/* <p>{file.text}</p> */}
                </div>
              </Link>
            ))
          ) : (
            <Link
              to={"/video/" + category.id}
              className={
                "lesson-playlist__item d-flex align-items-center" +
                " " +
                (category?.id === selectedVideo?.id &&
                  "lesson-playlist__item--active")
              }
              onClick={() => setVideoActive(category)}
              id={"listItem" + category.id}
            >
              <span className="lesson-playlist__item--count"></span>
              <div className="lesson-playlist__item--video">
                {/* <video>
                  <source
                    src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
                  />
                </video> */}
                <img
                  src={`https://dnvn.ir/api/v1/file/${category.posterId}`}
                  alt=""
                />
                <span>22:05</span>
              </div>
              <div className="lesson-playlist__item--text d-flex flex-column">
                <h4>{category.name}</h4>
                {/* <p>{file.text}</p> */}
              </div>
            </Link>
          )}
        </div>
      }
    </>
  );
}

export default connect(
  (state) => ({
    selectedVideo: state.publicApi.selectedVideo,
    realCategories: state.publicApi.bookInfo?.categories,
    vods: state.publicApi.bookSection?.vods,
  }),
  {
    // setVideoActive: publicApi.setVideoActive,
  }
)(LessonPlayList);