import React, { useState } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

import { addPolochon } from "../../actions/polochon";

import { PolochonEdit } from "./edit";

export const PolochonAddConnected = ({ addPolochon }) => {
  const [modal, setModal] = useState(false);

  return (
    <React.Fragment>
      <div className="btn btn-primary" onClick={() => setModal(true)}>
        <i className="fa fa-plus mr-2" />
        Add new polochon
      </div>

      <PolochonEdit
        title="Add a new polochon"
        icon="plus"
        show={modal}
        setShow={setModal}
        update={addPolochon}
      />
    </React.Fragment>
  );
};
PolochonAddConnected.propTypes = {
  addPolochon: PropTypes.func,
};

export const PolochonAdd = connect(null, { addPolochon })(PolochonAddConnected);