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

const DownloadLayer = (props) => {
  const {
    treeViewDownloadActiveFormat,
    treeViewDownloadFormats,
    treeViewDownloadLayerUrl,
    doUpdateTreeViewLayerDownloadFormat,
  } = props;

  return (
    <form className="cm-form-inline">
      <div className="cm-form-group">
        <label>
          <b>Download Type:</b>
        </label>
        <select
          onChange={(e) => { 
            doUpdateTreeViewLayerDownloadFormat(e);
          }}
          value={treeViewDownloadActiveFormat}
          className="cm-form-control"
          style={{ margin: "0 5px" }}
        >
          {treeViewDownloadFormats.map((format) => {
            return (
              <option key={format} value={format}>
                {format}
              </option>
            );
          })}
        </select>
      </div>
      <a
        rel="noopener noreferrer"
        type="submit"
        href={treeViewDownloadLayerUrl}
        title="Download Layer"
        target="_blank"
        className="cm-btn cm-btn-xs cm-btn-link"
      >
        <i className="mdi mdi-cloud-download" style={{ fontSize: "22px" }} />
      </a>
    </form>
  );
};
export default connect(
  "selectTreeViewDownloadActiveFormat",
  "selectTreeViewDownloadFormats",
  "selectTreeViewDownloadLayerUrl",
  "doUpdateTreeViewLayerDownloadFormat",
  DownloadLayer
);
