import React, { useState, useEffect } from "react";
import axios from "axios";
import Navbar from "../../components/Navbar/index";
import Footer from "../../views/Home/Footer/index";
import BreadCrumbs from "../../components/BreadCrumbs";
import Lesson from "./Lesson/index";
import { Link } from "react-router-dom";
import chat from "../../assets/icons/chat.png";
import slide from "../../assets/icons/slide.png";
import play from "../../assets/icons/play.png";
import bookmark from "../../assets/icons/bookmark.png";
import StyledRating from "../../components/StyledRating/index";
import { connect } from "react-redux";
import { book } from "../../redux/actions";
import scroll from "../../util/scroll";

import "./index.scss";

function Course({ lessons, getInfo, info }: any) {
  const [links, setLinks] = useState([
    { link: "/", name: "صفحه اصلی" },
    { link: "/courses", name: "دوره‌ها" },
    { link: "/courses/2", name: "نام کتاب" },
  ]);
  const [course, setCourse] = useState<any>(undefined);
  useEffect(() => {
    scroll.goToTop();
    getInfo({
      bookId: 1
      // window.location.pathname.slice(
      //   window.location.pathname.lastIndexOf("/") + 1,
      //   window.location.pathname.length
      // ),
    });
  }, []);

  return (
    <div className="course main d-flex flex-column">
      <Navbar />
      <main>
        <header className="course__header desktop align-items-end">
          <div className="course__info d-flex">
            <div className="course__info--image d-flex align-items-end">
              <img src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} alt="" />
            </div>
            <div className="course__info--description d-flex flex-column justify-content-between">
              <div>
                <BreadCrumbs links={links} />
                <h1>{info?.name}</h1>
              </div>
              <div className="d-flex justify-content-between">
                <div className="course-info-items d-flex align-items-center justify-content-around">
                  <img src={slide} alt="" />
                  <div className="d-flex flex-column">
                    <i>{240} ساعت درس </i>
                    <p>در این قسمت توضیحی</p>
                  </div>
                </div>
                <div className="course-info-items d-flex align-items-center justify-content-around">
                  <img src={chat} alt="" />
                  <div className="d-flex flex-column">
                    <i>ارتباط با استاد</i>
                    <p>در این قسمت توضیحی</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="course__options d-flex flex-column align-items-end justify-content-end">
            <div className="course__options--rate d-flex flex-column align-items-center justify-content-start">
              <div className="course__options--rate__number d-flex align-items-center">
                <div>
                  <b>10</b>
                  <i>/2</i>
                </div>
                <span>از 288 رای</span>
              </div>
              <StyledRating />
              <h2>میانگین رای کاربران</h2>
            </div>
            <button className="course__options--button d-flex align-items-center justify-content-between">
              اضافه کردن به علاقه‌مندی‌ها
              <img src={bookmark} alt="" />
            </button>
            <Link
              to="/video-tube"
              className="course__options--button d-flex align-items-center justify-content-between"
            >
              مشاهده پیشنمایش دوره
              <img src={play} alt="" />
            </Link>
          </div>
        </header>
        <header className="mobile flex-column">
          <div className="course__info d-flex">
            <div className="course__info--image d-flex align-items-end">
              <img src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} alt="" />
            </div>
            <div className="course__info--description d-flex flex-column justify-content-between">
              <BreadCrumbs links={links} />
              <h1>{info?.name}</h1>
              <i>240 ساعت</i>
              <div className="course__options--rate d-flex align-items-center justify-content-between">
                <div className="course__options--rate__number d-flex flex-column align-items-center">
                  <h2>میانگین رای کاربران</h2>
                  <div>
                    <b>10</b>
                    <i>/2</i>
                  </div>
                </div>
                <StyledRating />
              </div>
            </div>
          </div>
          <div className="course__options d-flex align-items-center justify-content-between">
            <button className="course__options--button d-flex align-items-center justify-content-around">
              اضافه کردن به علاقه‌مندی‌ها
              <img src={bookmark} alt="" />
            </button>
            <Link
              to="/video-tube"
              className="course__options--button d-flex align-items-center justify-content-around"
            >
              مشاهده پیشنمایش دوره
              <img src={play} alt="" />
            </Link>
          </div>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
            استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در
            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی
            در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را
            می طلبد تا با نرم افزارها شناخت بیشتری دارد.
          </p>
        </header>

        <section className="course__list d-flex flex-column">
          <header className="course__list--header">
            <h2>سر فصل دوره</h2>
            <p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p>
          </header>
          {lessons.map((lesson: any, i: any) => (
            <Lesson key={i} lesson={lesson} />
          ))}
        </section>
      </main>
      <Footer />
    </div>
  );
}

export default connect(
  (state: any) => ({
    lessons: state.book.mockLessons,
    info : state.book.info,
  }),
  { getInfo: book.info }
)(Course);
