import React, { useState } from "react";
import "./styles.css";
import { Amap, Marker } from "@amap/amap-react";

export default function App() {
  const [face, setFace] = useState("smile");

  const showFace = (from) => {
    console.log(`${from}: ${face}`);
  };

  const changeFace = () => {
    showFace("marker");
    setFace((face) => (face === "smile" ? "angry" : "smile"));
  };

  return (
    <div className="App">
      <div className="map-container">
        <Amap zoom={15} center={[116.473179, 39.993169]}>
          <Marker
            position={[116.473179, 39.993169]}
            label={{
              content: face,
              direction: "bottom"
            }}
            onClick={changeFace}
          />

          <button
            style={{ position: "fixed", zIndex: 1000, top: 200 }}
            onClick={() => showFace("button")}
          >
            show face
          </button>
        </Amap>
      </div>
    </div>
  );
}