/**
 * Our  
 * 
 * @description
 * @author Hasna
 * 
 * @todo A map component should not have the logic of marker . It should be managed in the consuming 
 * component
 * 
 */

import React from "react";

import GoogleMapReact from 'google-map-react';

import './google-map.scss'



export default function GoogleMap(props) {


  let { CandidatesModal } = props;

  const defaultProps = {
    center: props.center,
    zoom: 5
  };

  return (
    // Important! Always set the container height explicitly
    <div className="google-maps-element" style={{ height: props.height, width: props.width }}>


      <GoogleMapReact
        bootstrapURLKeys={{ key: "AIzaSyBuXbHQ3ZJYKOLkrBOk90JSFu1yHSbDZ-k" }}
        center={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) => props.onMapsLoaded(map, maps)}
        options={{
          gestureHandling: 'greedy'
        }}

        draggable={props.draggable}
      >

        {props.data && props.data.map((refr) => {

          var referrer = {}

          var lat = refr.data[0].op_bill[0].opReg.referrer.refr_latitude;
          var lng = refr.data[0].op_bill[0].opReg.referrer.refr_longitude;

          referrer = refr.counts;
          {/* <> */ }

          return (<Marker

            CandidatesModal={CandidatesModal}

            //key={place.id}
            lat={lat}
            lng={lng}
            referrer={referrer}

            data={refr.data}


          />)
          {/* </> */ }
        })}


        {props.lat && props.lng ?
          <div>
            <Marker lat={props.lat} lng={props.lng} referrer={props.referrer} />

          </div> : null}

      </GoogleMapReact>
    </div>
  );
}


// Marker component
const Marker = (props) => {
  const markerStyle = {
    border: "1px solid white",
    borderRadius: "50%",
    height: 10,
    width: 10,
    backgroundColor: "red",
    cursor: "pointer",
    zIndex: 10
  };

  return (
    <>
      <div style={markerStyle} />
      <InfoWindow data={props.data} CandidatesModal={props.CandidatesModal} lat={props.lat} lng={props.lng} referrer={props.referrer} />
    </>
  );
};


// InfoWindow component
const InfoWindow = ({ lat, lng, referrer, CandidatesModal, data }) => {


  const infoWindowStyle = {
    position: "relative",
    bottom: '105px',
    left: "-55px",
    width: 200,
    // height: 80,
    backgroundColor: "white",
    boxShadow: "rgb(195 195 195 / 30%) 0px 2px 7px 1px",
    padding: 10,
    fontSize: 14,
    borderRadius: 5,
    //zIndex: 100,
    textAlign: 'left',
  };




  const paraStyle = {
    marginBottom: "0px",
  };


  const contentStyle = {
    display: 'flex',
    justifyContent: 'space-between'

  }



  let confirmed_positive = (parseFloat((referrer.total_lab_positive_cases / referrer.total_cases) * 100).toFixed(2));


  return (


    <div style={infoWindowStyle} lat={lat} lng={lng}>


      {
        referrer.title
          ?
          (<div>

            {/* Campaign Name */}
            <p style={paraStyle}>
              <b>
                {referrer.title}
              </b>
            </p>
            {/* Campaign Name Ends */}

            {/* <div>
              Total Cases - 
            </div> */}

            {/* Total Cases */}
            {/* <p>
              <b> - Cases</b>
            </p> */}
            {/* Total Cases Ends */}

            <div style={contentStyle}>

              {/* XRay Positive */}
              <p style={paraStyle}>
                <b>{referrer.total_lab_positive_cases}</b> +ve / {referrer.total_cases} - <b>{confirmed_positive} %</b>

                {/* - <b>{referrer.total_lab_positive_cases}</b> */}
              </p>
              {/* XRay Positive Ends */}



              {/* LAB Positive */}
              {/* <div>
                <b>{referrer.total_lab_positive_cases}</b> - LAB +ve
              </div> */}
              {/* LAB Positive Ends */}

            </div>

            {/* <p>
              Positive Ratio - 
            </p> */}


            <CandidatesModal records={data} />

          </div>)
          :
          <p>
            <b>
              {referrer}
            </b>
          </p>
      }

    </div>
  );
};

















