import React from "react";
import { connect } from "redux-bundler-react";
import {
  BasicToolbarButton,
  BasicToolbarMenuUp,
  BasicToolbarMenuItem,
} from "../../application-controls";
import Settings from "./coordinate-display-settings";

class CoordinateInteraction extends React.Component {
  constructor(props) {
    super(props);

    this.openSettings = this.openSettings.bind(this);
  }

  openSettings() {
    const { doModalOpen, doBasicToolbarDeactivate } = this.props;
    doModalOpen({
      children: [Settings],
      options: {},
      openedBy: "PositionText",
    });
    doBasicToolbarDeactivate();
  }

  render() {
    const { displayProjection, displayProjectionName } = this.props;

    return (
      <BasicToolbarButton
        enabled={true}
        dropup={true}
        iconClass=""
        title={`Current Coordinate System: ${displayProjectionName}`}
        text={displayProjection}
        onDeactivate={this.cleanUp}
      >
        <BasicToolbarMenuUp>
          <BasicToolbarMenuItem
            active={false}
            iconClass="mdi mdi-settings icon-inline"
            title="Set Display Coordinate System"
            text="Set Display Coordinate System"
            onClick={this.openSettings}
            passProps={{}}
          />
        </BasicToolbarMenuUp>
      </BasicToolbarButton>
    );
  }
}

export default connect(
  "selectDisplayProjection",
  "selectDisplayProjectionName",
  "doModalOpen",
  "doBasicToolbarDeactivate",
  CoordinateInteraction
);
