import KartografPointsListPosition from "./kartografPointsListPosition";
import windowWidthType from "../utils/windowWidthType";
import useWindowSize from "../utils/resizeHook";
import { Fragment } from "@wordpress/element";
import WindowWidthType from "../utils/windowWidthType";

const KartografPointsList = (props) => {
  const windowSize = useWindowSize();

  return (
    <Fragment>
      {props.showMobile || windowSize > WindowWidthType.MD ? (
        <div className={"pointsList"}>
          {props.points.length > 0
            ? props.points.map((point) => {
                if (typeof point.open_hours === "object") {
                  point.open_hours = Object.values(point.open_hours);
                  return (
                    <KartografPointsListPosition
                      key={point.point_id}
                      point={point}
                      active={
                        props.selectedPointId
                          ? props.selectedPointId == point.point_id
                          : false
                      }
                      onClick={() => {
                        point.clickHandler();
                      }}
                    />
                  );
                }
              })
            : ""}
        </div>
      ) : (
        ""
      )}
    </Fragment>
  );
};

export default KartografPointsList;
