import React, { useState } from "react";
import { connect } from "redux-bundler-react";
import classnames from "../../utils/classnames";

export default () => {
  const [tool, setTool] = useState("distance");

  const [show, setShow] = useState(false);
  const toggleShow = () => {
    setShow(!show);
  };

  const dropdownClass = classnames({
    "dropdown-menu": true,
    show: show,
  });

  const iconClass = classnames({
    ms: true,
    "ms-measure-distance": tool === "distance",
    "ms-measure-area": tool === "area",
  });

  return (
    <div
      className="btn-group"
      role="group"
      aria-label="Button group with nested dropdown"
    >
      <button type="button" className="btn btn-sm btn-primary">
        <i className={iconClass}></i>
      </button>
      <div className="btn-group" role="group">
        <button
          onClick={toggleShow}
          type="button"
          className="btn btn-sm btn-primary dropdown-toggle"
          aria-haspopup="true"
          aria-expanded={show}
        ></button>
        <div className={dropdownClass}>
          <div
            onClick={() => {
              setTool("distance");
              setShow(false);
            }}
            className="dropdown-item"
          >
            <i className="text-muted ms ms-measure-distance pr-2"></i>Length
          </div>
          <div
            onClick={() => {
              setTool("area");
              setShow(false);
            }}
            className="dropdown-item"
          >
            <i className="text-muted ms ms-measure-area pr-2"></i>Area
          </div>
        </div>
      </div>
    </div>
  );
};

// export default () => {
//   return (
//     <button className="btn btn-sm btn-danger">
//       <i className="mdi mdi-airplane"></i>
//     </button>
//   );
// };
