import PointType from "../utils/pointsType";
import KartografOpeningHours from "./kartografOpeningHours";

import machine from "./img/machine.svg";
import point from "./img/point.svg";

const KartografPointDetails = (props) => {
  return (
    <div
      className={`punkt epaka-d-flex epaka-flex-column font-size-14px font-weight-400`}
    >
      <div
        onClick={() => {
          props.onCancel();
        }}
        className={"epaka-return"}
      >
        <i className={`epaka-icons icon-arrow-3`}></i> Wróć do wyszukiwania
      </div>
      {/*<hr className={styles.separator} />*/}
      <div className={"punktSzczegolyWrapper"}>
        <div className={"punktSzczegolyOverlay"}>
          <div className={"punktTitle"}>
            <img
              className={"punktIkona"}
              src={props.point.type === PointType.Machine ? machine : point}
              alt={"punkt_zaznaczony"}
            />
            <div className={"row1"}>{props.point.name}</div>
          </div>
          <div className={"punktAddress"}>
            <div className={"row1"}>
              {props.point.address.street} {props.point.address.building_number}
              {props.point.address.locale_number && (
                <span> / {props.point.address.locale_number}</span>
              )}
              ,
            </div>
            <div className={"row2"}>
              {props.point.address.postal_code} {props.point.address.city}
            </div>
          </div>
          <KartografOpeningHours
            hours={props.point.open_hours}
            expanded={false}
          />
          <div className={"epakaBtnMobileWrapper"}>
            <button
              className={
                "epakaBtn selectPoint epaka-d-flex align-items-center justify-content-center"
              }
              onClick={() => props.onClick()}
            >
              <span className={"label"}>Wybierz ten punkt</span>
              <i
                className={
                  "epaka-icons icon-chevron_right_2nd text-white font-size-12px"
                }
                style={{ right: "1rem" }}
              />
            </button>
            {/*<EpakaButton*/}
            {/*    className={props.buttonClass}*/}
            {/*    label={props.buttonLabel}*/}
            {/*    onClick={() => props.onApprove(props.point)}*/}
            {/*/>*/}
          </div>
        </div>
      </div>
    </div>
  );
};

export default KartografPointDetails;
