import { useContext } from "react";

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

const ScheduleItem = ({ schedule }) => {
  const { subCode, type, category, label, start, end } = schedule;
  const { subsObj } = useContext(CalendarStateContext);
  const subject = subsObj[subCode];
  if (!subject) {
    console.log("can't find " + subCode);
    return;
  }
  if (!subject.selected) return;

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

  return (
    <div className="ScheduleItem" style={{ borderColor: subject.color }}>
      <img className="s_symbol" src={selectSymbol()} alt="404" />
      {start && <span className="s_start">{start[0] + ":" + start[1]}</span>}
      {end && <span className="s_end">{end[0] + ":" + end[1]}</span>}
      <span className="s_category">{category}</span>
      <span className="s_slabel">{label}</span>
    </div>
  );
};

export default ScheduleItem;