import { styleDefault } from "@/mui";
import { Modal } from "@mui/material";
import { useState } from "react";

import MapPicker from "react-google-map-picker";

const DefaultLocation = {
  lat: 9.912345921562734,
  lng: 105.97776559918576,
};
const DefaultZoom = 10;

function ModalMap({ open, handleClose }) {
  const [defaultLocation, setDefaultLocation] = useState(DefaultLocation);

  const [location, setLocation] = useState(defaultLocation);
  const [zoom, setZoom] = useState(DefaultZoom);

  function handleChangeLocation(lat, lng) {
    setLocation({ lat: lat, lng: lng });
  }

  function handleChangeZoom(newZoom) {
    setZoom(newZoom);
  }

  function handleResetLocation() {
    setDefaultLocation({ ...DefaultLocation });
    setZoom(DefaultZoom);
  }

  return (
    <Modal open={open} onClose={handleClose} className="w-full">
      <div
        style={styleDefault}
        className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
              !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
      >
        <MapPicker
          zoom={zoom}
          mapTypeId="roadmap"
          style={{ height: "500px" }}
          onChangeZoom={handleChangeZoom}
          defaultLocation={defaultLocation}
          onChangeLocation={handleChangeLocation}
          apiKey="AIzaSyD07E1VvpsN_0FvsmKAj4nK9GnLq-9jtj8"
        />
      </div>
    </Modal>
  );
}

export default ModalMap;
