import zoomSymbol from "../assets/zoom.png";
import ecampusSymbol from "../assets/e-Campus.png";

const ScheduleItem = ({ schedule }) => {
  const {
    name: subjectName,
    nickname: subjectNickname,
    uid: scheID,
    color: subjectColor,
    url,
    type,
    label,
    description,
    detail,
    startTime = null, //HHMMSS문자열
    endTime = null,
  } = schedule;

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

  const click = (e) => {
    let target;
    if (e.target.className === "ScheduleItem") target = e.target;
    else if (e.target.classList.contains("ss")) target = e.target.offsetParent;
    else {
      if (e.target.className === "spc")
        e.target.offsetParent.style.display = "none";
      return;
    }

    target.lastChild.style.display = "grid";
  };

  return (
    <div
      className="ScheduleItem"
      style={{ borderColor: "#" + subjectColor }}
      onClick={click}
    >
      <img className="s_symbol ss" src={selectSymbol()} alt="404" />
      {startTime && (
        <span className="s_start ss">{startTime.substring(0, 5)}</span>
      )}
      {endTime && <span className="s_end ss">{endTime.substring(0, 5)}</span>}
      <span className="s_slabel ss">{label}</span>

      <div className="s_popup">
        <div className="spl">
          <span>{subjectName}</span>
          {url ? (
            <a href={url} target="_blank">
              {label}
            </a>
          ) : (
            <span>{label}</span>
          )}
          {description && <span>{description}</span>}
          {detail && <div dangerouslySetInnerHTML={{ __html: detail }}></div>}
        </div>
        <button className="spc">닫기</button>
      </div>
    </div>
  );
};

export default ScheduleItem;