import React from "react";
import PropTypes from "prop-types";
import Button from "antd/lib/button";
import Icon from "antd/lib/icon";
import { react2angular } from "react2angular";

export function EditVisualizationButton(props) {
  return (
    <Button
      data-test="EditVisualization"
      className="edit-visualization"
      onClick={() => props.openVisualizationEditor(props.selectedTab)}>
      <Icon type="form" />
      <span className="hidden-xs hidden-s hidden-m">Edit Visualization</span>
    </Button>
  );
}

EditVisualizationButton.propTypes = {
  openVisualizationEditor: PropTypes.func.isRequired,
  selectedTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

EditVisualizationButton.defaultProps = {
  selectedTab: "",
};

export default function init(ngModule) {
  ngModule.component("editVisualizationButton", react2angular(EditVisualizationButton));
}

init.init = true;