import StringHelper from "../utils/stringHelper";
import { renderToStaticMarkup } from "react-dom/server";

import "./kartografOpeningHours.scss";

const KartografOpeningHours = (props) => {
  const day_of_week = new Date().getDay();
  const sortedHours = props.hours
    .slice(day_of_week - 1)
    .concat(props.hours.slice(0, day_of_week - 1));
  let dayPHP = day_of_week - 1;
  if (dayPHP < 0) dayPHP = 6;
  let tomorrowPHP = dayPHP + 1;
  if (tomorrowPHP > 6) tomorrowPHP = 0;

  let is247 = true;
  if (props.hours.length === 7) {
    props.hours.forEach((val) => {
      if (val.open_from !== "00:00" || val.open_to !== "24:00") {
        is247 = false;
      }
    });
  } else {
    is247 = false;
  }

  return (
    <div className={"openingHoursWrapper pt-3 mt-1 pt-md-2 pb-3 mb-1 pb-md-2"}>
      {is247 && (
        <div className={"openToday"}>
          Czynne całodobowo
          <br />7 dni w tygodniu
        </div>
      )}
      {!is247 && sortedHours[0] !== undefined && (
        <div
          dangerouslySetInnerHTML={{
            __html: StringHelper.buildTodayOpen(sortedHours[0], {
              red: "closedToday",
              green: `openToday ${props.active ? "openTodayActive" : ""}`,
              orange: "soonToday",
            }),
          }}
        ></div>
      )}
    </div>
  );
};

export default KartografOpeningHours;
