import React, {useState} from "react";
import {Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
import useGroups from "../../Hooks/group";
import Loading from "../Loading";
import {changeLight} from "../../Helpers/lights";

function LightPropertiesModal({id, gValue, nValue, onClose}) {
  const [groupId, setGroupId] = useState(gValue);
  const [name, setName] = useState(nValue);
  const groups = useGroups();
  if (groups === null) {
    return <Modal isOpen={true}><Loading/></Modal>;
  }

  return (
    <Modal isOpen={true}>
      <ModalHeader>Lysegenskaper</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"
                     value={name}
                     onChange={e => setName(e.target.value)}
              />
            </Col>
          </FormGroup>
        </Form>
        <Form>
          <FormGroup row>
            <Label sm={3} for="sel-group">
              Gruppe:
            </Label>
            <Col sm={9}>
              <Input type="select"
                     value={groupId}
                     onChange={e => setGroupId(parseInt(e.target.value, 10))}>
                {groups.map(g => <option value={g.id}>{g.name}</option>)}
              </Input>
            </Col>
          </FormGroup>
        </Form>
      </ModalBody>
      <ModalFooter>
        <Button color="primary"
                onClick={() => {
                  changeLight(id, name, groupId);
                  onClose();
                }}
        >
          Lagre
        </Button>
        {" "}
        <Button color="secondary" onClick={onClose}>Avbryt</Button>
      </ModalFooter>
    </Modal>
  );
}

export default LightPropertiesModal;