import React from "react";
import moment from "moment";

const CoursesCatalogItem = ({ course }) => {
  const { index, Name, PlayCount, CreateTime, Code } = course;
  function getCourseCreatedTime() {
    const dateObj = moment(CreateTime).local();
    const formattedTime = dateObj.format("YYYY-MM-DD HH:mm");
    return <div>{formattedTime}</div>;
  }
  function openSmallWindow() {
    const screenWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    const screenHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    const width = screenWidth * 0.8;
    const height = screenHeight * 0.8;
    const left = (screenWidth - width) / 2;
    const top = (screenHeight - height) / 2;
    let currentPlatform = "FPlatformEnum.web";
    if (sessionStorage.getItem("currentPlatform") !== undefined) {
      currentPlatform = sessionStorage.getItem("currentPlatform");
    }
    let token = "";
    if (sessionStorage.getItem("token")) {
      token = `/${JSON.parse(sessionStorage.getItem("token"))}`;
    }
    const url = "#/video_course_player/" + Code + `/${currentPlatform}` + token;
    const windowFeatures = `width=${width},height=${height},top=${top},left=${left}, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=no, allowsInlineMediaPlayback=yes`;

    window.open(url, "_blank", windowFeatures);
  }
  return (
    <div className="px-5 flex items-center justify-between py-2 text-sm hover:bg-gray-200 hover:rounded duration-150 cursor-pointer">
      <div className="w-20">
        <div className="w-6">
          <center>{index + 1}</center>
        </div>
      </div>
      <div className="w-1/2">{Name}</div>
      <div className="w-1/4 hidden md:block">{PlayCount}</div>
      <div className="w-1/4 hidden md:block">{getCourseCreatedTime()}</div>
      <div className="w-1/4  flex flex-row">
        <button
          className="bg-white hover:bg-gray-100 text-gray-500 text-sm py-1 px-3 border rounded"
          onClick={openSmallWindow}
        >
          播放
        </button>
      </div>
    </div>
  );
};

export default CoursesCatalogItem;
