import { useContext, useRef } from "react";
import zoomSymbol from "../assets/zoom.png";
import ecampusSymbol from "../assets/e-Campus.png";
import { CalendarStateContext } from "pages/Calendar";

const ScheduleItem = ({ schedule, finish }) => {
  const { state: calState } = useContext(CalendarStateContext);
  const {
    name: subjectName,
    nickname: subjectNickname,
    uid: scheUID,
    color: subjectColor,
    url,
    type,
    label,
    description = null,
    detail = null,
    startTime = null, //HHMMSS문자열
    endTime = null,
    table,
  } = schedule;
  let sTime = startTime ? startTime.substring(0, 5) : ""; //HHMM
  let eTime = endTime ? endTime.substring(0, 5) : "";
  const subStr =
    calState.scope !== "month" ? `${subjectNickname || subjectName}` : null;

  const selectSymbol = () => {
    let symbol;
    switch (type) {
      case "zoom":
        symbol = zoomSymbol;
        break;
      case "assignment":
        symbol = ecampusSymbol;
        break;
      default:
    }
    return symbol;
  };

  const popupRef = useRef();
  const thisRef = useRef();

  const click = (e) => {
    //Item
    if (e.target.classList.contains("ss"))
      popupRef.current.style.display = "grid";
    else {
      if (e.target.className === "spc") popupRef.current.style.display = "none"; //popup close
      if (e.target.className === "spd") {
        finish(table, scheUID);
        thisRef.current.style.display = "none";
      }
    }
  };

  return (
    <div
      className="ScheduleItem ss"
      style={{ borderColor: "#" + subjectColor }}
      onClick={click}
      ref={thisRef}
    >
      {subStr && (
        <span className="s_substr ss">
          {subStr} <br />
        </span>
      )}
      <img className="s_symbol ss" src={selectSymbol()} alt="404" />
      {startTime && <span className="s_start ss">{sTime}</span>}
      {endTime && <span className="s_end ss">{eTime}</span>}
      <span className="s_slabel ss">{label}</span>

      <div className="s_popup" popup="true" ref={popupRef}>
        <div className="spl">
          <span>{subjectName}</span>
          {url ? (
            <a href={url} target="_blank">
              {label}
            </a>
          ) : (
            <span>{label}</span>
          )}
          {(startTime || endTime) && <span>{sTime + " ~ " + eTime}</span>}
          {description && <span>{description}</span>}
          {detail && <div dangerouslySetInnerHTML={{ __html: detail }}></div>}
        </div>
        <div className="sp_btn">
          <button className="spd">완료</button>
          <button className="spc">닫기</button>
        </div>
      </div>
    </div>
  );
};

export default ScheduleItem;