import * as azureMap from "react-azure-maps";
import {
  ControlOptions,
  AuthenticationType as auth
} from "azure-maps-control";

import "./App.css";

const cameraOptions: azureMap.AzureSetCameraOptions = {
  center: [-1.9591947375679695, 52.46891727965905],
  maxBounds: [-6.0, 49.959999905, 1.68153079591, 58.6350001085],
};

const controls: azureMap.IAzureMapControls[] = [
  {
    controlName: "StyleControl",
    controlOptions: {
      mapStyles: ["road", "grayscale_light", "satellite_road_labels"],
    },
    options: {
      position:"bottom-left",
    } as ControlOptions,
  },
  {
    controlName: "ZoomControl",
    options: { position: "bottom-right" } as ControlOptions,
  },
];

const mapConfigState: azureMap.IAzureMapOptions = {
  authOptions: {
    authType: auth.subscriptionKey,
    subscriptionKey: "********************************",
    clientId: ""********************************",
  },
};

function App() {
  return (
    <div className="map-container">
      <azureMap.AzureMapsProvider>
        <div style={{ height: "600px" }}>
          <azureMap.AzureMap
            options={mapConfigState}
            controls={controls}
            cameraOptions={cameraOptions}
          ></azureMap.AzureMap>
        </div>
      </azureMap.AzureMapsProvider>
    </div>
  );
}

export default App;