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

import {
  BasicToolbarButton,
  BasicToolbarMenuUp,
  BasicToolbarMenuItem,
} from "../../application-controls";
import CoordinateLatLonInput from "./coordinate-lat-lon-input";

const CoordinateDisplay = (props) => {
  const {
    doStartCoordCopy,
    coordsCopyActive,
    coordsLatLonInput,
    doCoordZoomTo,
    coordsValues,
  } = props;

  const goToDisabled =
    coordsLatLonInput.X.length > 0 && coordsLatLonInput.Y.length > 0
      ? false
      : true;

  return (
    <BasicToolbarButton
      enabled={true}
      dropup={true}
      iconClass=""
      title="Coordinate Display"
      text={`${coordsValues.X}, ${coordsValues.Y}`}
      passProps={{ style: { minWidth: 180 } }}
    >
      <BasicToolbarMenuUp>
        <BasicToolbarMenuItem
          active={false}
          iconClass="mdi mdi-content-copy icon-inline"
          title="Copy Coordinate to Clipboard"
          text="Copy Coordinate to Clipboard"
          onClick={doStartCoordCopy}
          disabled={coordsCopyActive}
          passProps={{}}
        />
        <CoordinateLatLonInput label="X" placeholder="Enter Longitude.." />
        <CoordinateLatLonInput label="Y" placeholder="Enter Latitude.." />
        <BasicToolbarMenuItem
          active={false}
          iconClass="mdi mdi-map-marker-radius icon-inline"
          title="Go to Coordinate"
          text="Go to Coordinate"
          onClick={doCoordZoomTo}
          passProps={{}}
          disabled={goToDisabled}
        />
      </BasicToolbarMenuUp>
    </BasicToolbarButton>
  );
};
export default connect(
  "doStartCoordCopy",
  "doCoordZoomTo",
  "selectCoordsCopyActive",
  "selectCoordsLatLonInput",
  "selectCoordsValues",
  CoordinateDisplay
);
