import React from "react";
import "./index.scss";
import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions";

function LessonPlayList({
  category,
  selectedVideo,
  setVideoActive,
  catergories,
  realCategories,
}: any) {
  const bookId = localStorage.getItem("bookId");
  return (
    <>
      {
        <div className="lesson-playlist d-flex flex-column">
          {bookId && (
            <header>
              <h3>
                { realCategories.filter(
                      (item: any) => item.id === category[0].categoryId
                    )[0].name
                }
              </h3>
              <span></span>
            </header>
          )}

          {bookId ? (
            category.map((video: any, i: any) => (
              <div
                className={
                  "lesson-playlist__item d-flex align-items-center" +
                  " " +
                  (video?.id === selectedVideo?.id &&
                    "lesson-playlist__item--active")
                }
                key={i}
                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>
              </div>
            ))
          ) : (
            <div
              className={
                "lesson-playlist__item d-flex align-items-center" +
                " " +
                (category?.id === selectedVideo?.id &&
                  "lesson-playlist__item--active")
              }
              onClick={() => setVideoActive(category)}
            >
              <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>
            </div>
          )}
        </div>
      }
    </>
  );
}

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