import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import PlayList from "../../components/CourseChapter";
import VideoPlayer from "../../components/VideoPlayer";
import JolPlayer from "../../components/JolPlayer";

import poster from "../../assets/images/poster.svg";
import Divider from "../../components/Divider";
import Season from "./components/Season";

function VideoDisplay({
  isMobile,
  product = {
    type: "کتاب ها",
    name: "ریاضی",
    price: "145.000 تومان",
    imageUrl: "https://dnvn.ir/api/v1/file/2105",
    poster: poster,
    grade: "پایه هفتم ابتدایی",
    seasons: [
      {
        name: "فصل اول: مباحث جوشش مواد مذاب در مرکز زمین",
        duration: "2:30:13",
        units: [
          {
            name: "مقدمه جالب توجه نویسنده کتاب برای شما",
            duration: "14:30",
            download: true,
            play: true,
          },
          {
            name: "چگونگی ساخت نیروگاه‌های برقی ",
            duration: "14:30",
            download: false,
            play: true,
          },
          {
            name: "آیا گوگل از ما دزدی می‌کند ؟",
            duration: "14:30",
            download: true,
            play: true,
          },
        ],
      },
    ],
  },
  headerOptions,
  setHeaderOptions,
  book,
  seasons,
  grades,
  getBook,
  getSeason,
  selectedVideo,
}) {
  useEffect(() => {
    const id = window.location.pathname.slice(
      8,
      window.location.pathname.lastIndexOf("/")
    );
    getBook({bookId : id});
    setHeaderOptions(headerOptions);
    const cat = localStorage.getItem("season")?.split(",");
    getSeason({ bookId: cat[0], categoryId: cat[1] });
  }, []);

  useEffect(() => {

  },[])

  const enamad =
    '<a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN"><img referrerpolicy="origin" src="https://Trustseal.eNamad.ir/logo.aspx?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN" alt="" style="cursor:pointer" id="x8oNSO7tTnqAniyPpPyN"></a>';
  return isMobile ? (
    <div className="w-full flex flex-col px-4">
      <div className="w-full flex flex-col mb-6">
        <div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
          <video
            style={{ width: "100%", height: "calc(100vw * 9 / 16 - 16)" }}
            controls
          >
            <source
              src={`https://dnvn.ir/api/v1/file/20540`}
              type="video/mp4"
            />
          </video>
        </div>
        {/* <div className="flex flex-col flex-1 justify-between pr-2">
          <div className="flex flex-col">
            <strong className="mt-1 text-blue5F text-base dark:text-white">
              {product.name}
            </strong>
            <span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
          </div>
          <Divider type={"vertical"} />
        </div> */}
      </div>
      <div className="flex flex-col">
        {product.seasons.map((season, index) => (
          <Season season={season} key={index} />
        ))}
      </div>
    </div>
  ) : (
    <div className="w-11/12 flex flex-col mb-6 justify-center items-center mx-auto pt-24 pb-20">
      <div className="w-full flex flex-row justify-between overflow-hidden relative gap-2 mt-4">
        <div className="flex flex-col w-8/12">
          <JolPlayer
            fileIds={selectedVideo?.fileIds}
            posterId={selectedVideo?.posterId}
          />
          <h1 className="mx-4 my-2 text-4xl text-blue52 pb-4 border-b-2 border-solid border-gray-200">
            {selectedVideo?.name}
          </h1>
          <p className="m-4 text-gray70 leading-7 font-normal text-tiny">
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
            استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
            ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز،
            و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای
            زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و
            متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان
            رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد
            کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
            راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل
            حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود
            طراحی اساسا مورد استفاده قرار گیرد.
          </p>
        </div>
        <PlayList playList={book?.vods} />
      </div>
      {/* <div className="flex flex-col flex-1 justify-between pr-2">
          <div className="flex flex-col">
            <strong className="mt-1 text-blue5F text-base dark:text-white">
              {product.name}
            </strong>
            <span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
          </div>
          <Divider type={"vertical"} />
        </div> */}
      <div></div>
    </div>
  );
}

const mapStateToProps = (state) => ({
  isMobile: state.publicApi.isMobile,
  book: state.publicApi.bookSection,
  seasons: state.publicApi.categories,
  grades: state.publicApi.grades,
  selectedVideo: state.publicApi.selectedVideo,
});

const mapDispatchToProps = {
  setHeaderOptions: publicApi.setHeaderOptions,
  getBook: publicApi.bookInfo,
  getSeason: publicApi.bookSection
};

export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);