import React, { useState } from "react";

const CourseChapter = ({ chapters }) => {
  const [selectedLesson, setSelectedLesson] = useState(null);

  return (
    <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
      <div
        className="rounded py-5 px-4 relative"
        style={{ backgroundColor: "#196EC033" }}
      >
        {/* top */}
        <div className="flex flex-row items-center justify-between">
          <div>
            <h2 className="text-blue-800 text-base">سرفصل دوره</h2>
          </div>
          <div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
            <span className="text-blue-800 text-sm px-2">علوم تجربی</span>
            <span className="text-blue-800 text-sm px-2">پایه ششم</span>
          </div>
        </div>
        {/* divider */}
        <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
        {/* course title */}
        {chapters.map((chapter, index) => (
          <div className="flex flex-col" key={index}>
            <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
              <p className="text-sm text-white">{chapter.title}</p>
              <span className="text-sm text-white">{chapter.duration}</span>
            </div>
            {/* course lessons */}
            {chapter.lessons.map((lesson, i) => (
              <div
                className="flex flex-row items-center justify-around"
                key={i}
              >
                {/* right div dot dot */}
                <div
                  className="flex items-center relative flex-col "
                  style={{ width: "10%", transform: "translateY(30px)" }}
                >
                  <div
                    className={`flex justify-center items-center w-4 h-4 rounded-full 
                    ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
                    ${lesson.passed ? "bg-red-600" : "bg-blue-600"}
                  `}
                  ></div>
                  <span
                    className="w-1"
                    style={{
                      borderRight: "2px dotted yellow",
                      transform: "translateX(-1px)",
                      height: "65px",
                    }}
                  ></span>
                </div>
                {/* left div content  */}
                <div
                  className={`mt-2 bg-white border border-blue-600 flex flex-col rounded-md cursor-pointer transition duration-200 ease-in-out group  hover:bg-blue-600
                  ${selectedLesson === lesson ? "bg-blue-600" : ""}`}
                  style={{ width: "80%" }}
                  onClick={() => setSelectedLesson(lesson)}
                >
                  {/* top */}
                  <div className="flex flex-row items-center justify-between p-2">
                    <p
                      className={`text-sm text-blue-500 group-hover:text-white
                      ${selectedLesson === lesson ? "text-red-600" : ""}`}
                    >
                      {lesson.title}
                    </p>
                    <span
                      className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
                    ${selectedLesson === lesson ? "text-red-600" : ""}`}
                    >
                      {lesson.duration}
                    </span>
                  </div>
                  {/* divider */}
                  <div
                    className={`border-t border-blue-600 group-hover:border-white ${
                      selectedLesson === lesson ? "border-red-600" : ""
                    }`}
                  ></div>
                  {/* bottom */}
                  <span
                    className={`text-xs text-center text-blue-500 group-hover:text-white p-2
                  ${selectedLesson === lesson ? "text-red-600" : ""}`}
                  >
                    {lesson.play}
                  </span>
                </div>
              </div>
            ))}
          </div>
        ))}
        {/* blue left border */}
        <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div>
      </div>
    </section>
  );
};

export default CourseChapter;

CourseChapter.defaultProps = {
  chapters: [
    {
      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
      duration: "2:30:13",
      lessons: [
        {
          title: "آیا گوگل از ما دزدی میکند؟",
          duration: "14:30",
          play: "پخش",
          passed: true,
        },
        {
          title: "چگونگی ساخت نیروگاه های برقی",
          duration: "22:31",
          play: "در حال پخش",
          passed: true,
        },
        {
          title: "آیا از اینترنت می توان درآمد داشت؟",
          duration: "10:09",
          play: "نمایش",
          passed: false,
        },
        {
          title: "زمین سبز و آسمان آبی",
          duration: "56:09",
          play: "نمایش",
          passed: false,
        },
      ],
    },
  ],
};