import {useMapAutoComplete} from "@fanam-pkg/core-utils"
import {useEffect} from "react"
import {assets} from "../../assets"
import {Button, ImageView} from "../../atoms"
import {MapViewProps} from "../../props"
import styles from "./styles.module.sass"

export const MapView = ({decodedAddress, onConfirm}: MapViewProps) => {
  const {addressData} = useMapAutoComplete(decodedAddress)
  const {state, city, pinCode, subLocality, latitude = 0, longitude = 0} = addressData
  const address = `${subLocality} ${city}, ${state} - ${pinCode}`

  const onClick = () => onConfirm(addressData)

  useEffect(() => {
    const mapElement = document.getElementById("map")
    if (mapElement) {
      const map = new window.google.maps.Map(mapElement, {
        zoom: 18,
        center: {lat: latitude, lng: longitude},
      })

      const zoomControlDiv = document.createElement("div")
      map.controls[window.google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlDiv)
    }
  }, [latitude, longitude])

  return (
    <section className={styles.map_view_container}>
      <section className={styles.map_view}>
        <section id="map" className={styles.map_container}></section>
        <section id="marker-element" className={styles.marker}></section>
      </section>
      <section className={`${styles.location_status} flex`}>
        <ImageView src={assets?.ic_location} alt="location" imgSize={20} />
        <h5 className="ellipsis">{address}</h5>
      </section>
      <Button onClick={onClick} wrapperClass={styles.confirm_but}>
        CONFIRM LOCATION
      </Button>
    </section>
  )
}