import React from "react";
import { BasicToolbarMenuItem } from "../../application-controls";
import { connect } from "redux-bundler-react";

class AddGeoJsonButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleFile = this.handleFile.bind(this);
  }

  handleClick(e) {
    this.geojsonInput.click();
  }

  handleFile(e) {
    const { doAddDataFile } = this.props;
    const file = this.geojsonInput.files[0];
    doAddDataFile(file);
  }

  render() {
    return (
      <BasicToolbarMenuItem
        active={false}
        iconClass="ms ms-geojson icon-inline"
        title="Add Local GeoJSON File"
        text="Add Local GeoJSON File"
        onClick={this.handleClick}
        passProps={{}}
        disableSubmenu={true}
      >
        <input
          onChange={this.handleFile}
          accept=".geojson,.json"
          className="hidden"
          type="file"
          ref={(el) => {
            this.geojsonInput = el;
          }}
        />
      </BasicToolbarMenuItem>
    );
  }
}

export default connect("doAddDataFile", AddGeoJsonButton);
