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

import lupa from "./img/lupa.png";
import KartografSpinner from "./kartografSpinner";

const KartografAutocompleteList = (props) => {
  let float = true;
  if (props.float !== undefined) {
    float = props.float;
  }

  let inactive = false;
  if (props.inactive !== undefined) {
    inactive = props.inactive;
  }

  return (
    <div
      className={
        float
          ? "autocompleteListMapContainer"
          : "autocompleteListModalContainer"
      }
    >
      {props.loading !== true && inactive == false ? (
        (props.addressAutocompleteElements.length > 0 ||
          props.pointAutocompleteElements.length > 0) && (
          <div
            className={`${float ? "autocompleteMapList" : "autocompleteModalList"}`}
          >
            <div className={"scroll-y h-100"}>
              {props.addressAutocompleteElements.length > 0 && (
                <div>
                  <div className={"autocompleteListHeader"}>Lokalizacja</div>
                  {props.addressAutocompleteElements.map((item, key) => {
                    return (
                      <div
                        key={"autocompleteListElement-" + key}
                        className={"autocompleteListElement"}
                        onClick={() => props.onClick(item)}
                      >
                        {StringHelper.boldSearchTerm(
                          item.processed_name,
                          props.searchTerm,
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
              {props.pointAutocompleteElements.length > 0 && (
                <div>
                  <div className={"autocompleteListHeader"}>
                    Lista Paczkomatów i Punktów
                  </div>
                  {props.pointAutocompleteElements.map((item, key) => {
                    return (
                      <KartografPointsListPosition
                        point={item}
                        short={true}
                        showIcon={props.icons !== false}
                        highlight={props.searchTerm}
                        onClick={() => {
                          props.onClick(item);
                        }}
                        active={false}
                      />
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        )
      ) : (
        <div
          className={float ? "autocompleteMapList" : "autocompleteModalList"}
        >
          {props.loading ? (
            <div className={"autocompleteSpinnerContainer"}>
              <KartografSpinner size={10} />
            </div>
          ) : (
            <div className={"autocompleteInactive"}>
              {"clarify-location"}
              <img src={lupa} />
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default KartografAutocompleteList;
