import { connect } from "redux-bundler-react";

const IdentifyBufferSettings = (props) => {
  const { theme, identifyBufferUnit, doUpdateBufferUnit, doModalClose } = props;
  const units = [
    { name: "Degrees", abv: "deg" },
    { name: "Kilometers", abv: "km" },
    { name: "Miles", abv: "mi" },
  ];
  return (
    <div>
      <div className={`cm-modal-header ${theme}`}>Identify Buffer Settings</div>
      <div className="cm-modal-body">
        <h6>Please choose a supported unit below:</h6>
        {units.map((unit) => {
          return (
            <button
              key={unit.abv}
              name={unit.abv}
              className={`cm-btn cm-btn-sm cm-btn-block cm-btn-default ${
                identifyBufferUnit === unit.abv ? "active" : ""
              }`}
              type="button"
              onClick={doUpdateBufferUnit}
            >
              {unit.name}
            </button>
          );
        })}
      </div>
      <div className="cm-modal-footer">
        <button
          className={`cm-btn cm-btn-sm cm-btn-theme ${theme}`}
          onClick={doModalClose}
        >
          Cancel
        </button>
      </div>
    </div>
  );
};
export default connect(
  "doUpdateBufferUnit",
  "doModalClose",
  "selectIdentifyBufferUnit",
  "selectTheme",
  IdentifyBufferSettings
);
