import React, {useState} from "react";
import {Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
import {addGroup} from "../../Helpers/groups";

function GroupAddModal({onClose}) {
  const [name, setName] = useState("");

  return (
    <Modal isOpen={true}>
      <ModalHeader>Ny gruppe</ModalHeader>
      <ModalBody style={{margin: "0 auto"}}>
        <Form>
          <FormGroup row>
            <Label sm={3} for="text-name">
              Navn:
            </Label>
            <Col sm={9}>
              <Input type="text"
                     id="text-name"
                     name="power"
                     value={name}
                     onChange={e => setName(e.target.value)}/>
            </Col>
          </FormGroup>
        </Form>
      </ModalBody>
      <ModalFooter>
        <Button color="primary"
                onClick={() => {
                  addGroup(name);
                  onClose();
                }}
        >
          Lagre
        </Button>
        {" "}
        <Button color="secondary" onClick={onClose}>Avbryt</Button>
      </ModalFooter>
    </Modal>
  );
}

export default GroupAddModal;