import React, { useState, useEffect } from "react";
// import Image from "next/image";
import CourseCoverImage from "./CourseCoverImage";
import ToastButton from "../public/ToastButton";
import PaymentModal from "../public/PaymentModal";
import { useNavigate } from "react-router-dom";
import * as coursesAPI from "../../apis/coursesAPI";
import { notification, Tag } from "antd";

const MyCourseCard = ({
  course,
  subsetTab,
  getCourses,
  currentTab,
  currentPlatform,
}) => {
  const navigate = useNavigate();

  const routerToDetailPage = () => {
    navigate("/detail/" + course.Code + "/" + subsetTab);
  };

  return (
    <div className="flex flex-col rounded shadow-lg p-4 bg-white">
      <div className="cursor-pointer group relative pb-[56.25%] rounded overflow-hidden">
        <div onClick={routerToDetailPage}>
          <CourseCoverImage coverImageUrl={course.Poster || course.Cover} />
        </div>
        <CourseCourseLabels course={course} />
      </div>
      <div
        className="group cursor-pointer flex flex-grow items-start justify-between"
        onClick={routerToDetailPage}
      >
        <h3 className="text-base font-bold mt-1 group-hover:text-blue-500">
          {course.Name}
        </h3>
      </div>

      <div className="mt-1 flex justify-between">
        <div className="items-start self-start">
          <CourseLecturers course={course} />
        </div>
        <div className="self-end">
          {
            <div className="self-end">
              {currentTab !== 1 && course.Status === 4 && (
                <button
                  className="flex-1 md:flex-none bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
                  onClick={() => {
                    if (currentTab === 2) {
                      navigate(
                        "/video_course_player/" +
                          course.Code +
                          "/" +
                          currentPlatform
                      );
                    } else {
                      coursesAPI.sendCourseEntryNotice(
                        `target=joinCourse?code=${course.Code}`
                      );
                    }
                  }}
                >
                  进入课程
                </button>
              )}
            </div>
          }
        </div>
      </div>
    </div>
  );
};

/// 标签
const CourseCourseLabels = ({ course }) => {
  if (!course.CourseLabels || course.CourseLabels.length === 0) {
    return <p></p>;
  }

  const courseLabelsDisplay = course.CourseLabels.filter(
    (lecturer) => lecturer
  ).join("、");

  if (!courseLabelsDisplay) {
    return null;
  }

  return (
    <div className="hover:bg-blue-50 absolute top-2 left-2 bg-gray-200 opacity-90 text-neutral-800 text-sm px-3 py-1 rounded">
      {courseLabelsDisplay}
    </div>
  );
};

/// 课程讲师
const CourseLecturers = ({ course }) => {
  if (!course.TeacherName || course.TeacherName.length === 0) {
    return (
      <div className="flex">
        <p className="text-gray-900 text-sm">讲师：</p>
        <span className="text-sm">{"暂无"}</span>
      </div>
    );
  }

  // const lecturersDisplay = course.TeacherName
  //   .filter((lecturer) => lecturer)
  //   .join("、");

  // if (!lecturersDisplay) {
  //   return null;
  // }

  return (
    <div className="flex">
      <p className="text-gray-900 text-sm">讲师：</p>
      <span className="text-sm">{course.TeacherName}</span>
    </div>
  );
};

export default MyCourseCard;
