import { Button } from '@mui/material';
import { LoadScriptNext, GoogleMap, Marker, OverlayView } from '@react-google-maps/api';

const containerStyle = {
  width: '100%',
  height: 'calc(100vh - 150px)'
};

export default function RiderLocationMap({ riderLocations }) {
  console.log('riderLocations', riderLocations);

  const center = {
    lat: Number(riderLocations?.[0]?.latitude || 11.0056),
    lng: Number(riderLocations?.[0]?.longitude || 76.9661)
  };
  const GreenIcon = {
    url: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
    scaledSize: new window.google.maps.Size(25, 41),
    anchor: new window.google.maps.Point(12, 41)
  };

  const RedIcon = {
    url: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
    scaledSize: new window.google.maps.Size(25, 41),
    anchor: new window.google.maps.Point(12, 41)
  };

  return (
    <LoadScriptNext googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
      <GoogleMap mapContainerStyle={containerStyle} zoom={12} center={center}>
        {riderLocations &&
          riderLocations?.map((r, index) => {
            const lat = Number(r.latitude);
            const lng = Number(r.longitude);
            return (
              <div key={index}>
                {/* Marker */}
                <Marker
                  position={{ lat, lng }}
                  icon={r.status == 'active' ? GreenIcon : RedIcon}
                  label={{
                    fontSize: '14px',
                    fontWeight: 'bold'
                  }}
                />
                <OverlayView position={{ lat, lng }} mapPaneName={OverlayView.OVERLAY_LAYER}>
                  <div
                    style={{
                      background: 'none',
                      color: 'green',
                      padding: '2px 8px',
                      borderRadius: '4px',
                      fontSize: '12px',
                      fontWeight: 600,
                      whiteSpace: 'nowrap',
                      transform: 'translate(-50%, -140%)',
                      pointerEvents: 'none',
                      ml: 20
                    }}
                  >
                    <Button variant="contained" color="primary" size="small">
                      {` ${r.username} `}
                      {/* <br /> */}
                      {/* {`${r.contactno || '##### ##### '}   `} */}
                      <br />
                      {`(${r.orderid || ''})   `}
                    </Button>
                  </div>
                </OverlayView>
              </div>
            );
          })}
      </GoogleMap>
    </LoadScriptNext>
  );
}