import React from 'react';
// import Image from "next/image";
import CourseCoverImage from './CourseCoverImage';
import { useNavigate } from 'react-router-dom';
import * as coursesAPI from '../../apis/coursesAPI';
import ItemLabels from '../public/ItemLabels';

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

  const routerToDetailPage = () => {
    navigate('/detail/' + course.Code + '/' + subsetTab);
  };
  const token =
    sessionStorage.getItem('token') &&
    sessionStorage.getItem('token') !== 'null'
      ? JSON.parse(sessionStorage.getItem('token'))
      : null;

  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.Cover} />
        </div>
        <ItemLabels 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={() => {
                    // currentTab === 2 (我报名的Tab下直接进h5课程页面，其他状态通知Flutter进入课程页面)
                    if (currentTab === 2 || course.IsAssistant) {
                      navigate(
                        '/video_course_player/' + course.Code + '/' + platform,
                      );
                    } else {
                      coursesAPI.sendCourseEntryNotice(
                        `target=joinCourse?code=${course.Code}&token=${token}`,
                      );
                    }
                  }}>
                  进入课程
                </button>
              )}
            </div>
          }
        </div>
      </div>
    </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;
