lucifer/webui/src/Components/Group.jsx

import React, {useState} from "react";
import {Button, Card, CardBody, CardFooter, CardHeader, ListGroup} from "reactstrap";
import useLights from "../Hooks/light";
import Light from "./Light";
import Loading from "./Loading";
import {deleteGroup} from "../Helpers/groups";
import ColorModal from "./Modals/ColorModal";
import {changeColor} from "../Helpers/lights";

function Group({id, name}) {
  const lights = useLights({groupId: id});
  const [colorModal, setColorModal] = useState("");

  const ready = lights !== null;
  const noLights = ready && lights.length === 0;
  const hasLights = ready && lights.length > 0;

  if (id === 0 && noLights) {
    return null;
  }

  function onDelete() {
    if (window.confirm(`Vil du virkelig fjerne "${name}"?`)) {
      deleteGroup(id);
    }
  }

  let cValue = null;
  let bValue = null;
  let pValue = null;
  if (hasLights) {
    cValue = lights[0].color;
    bValue = lights[0].brightness;
    pValue = lights[0].on;
  }

  return (
    <Card className="mt-3">
      <CardHeader>{name}</CardHeader>
      <CardBody>
        {ready
          ? <ListGroup>{lights.map(light => <Light key={light.id} {...light} />)}</ListGroup>
          : <Loading/>}
      </CardBody>
      <CardFooter>
        <Button color="primary">Detaljer</Button>
        {" "}
        {hasLights && (
          <Button color="secondary" onClick={() => setColorModal(true)}>Skift farger</Button>
        )}
        {" "}
        {id > 0 && <Button color="danger" onClick={onDelete}>Fjern</Button>}
      </CardFooter>
      {colorModal && (
        <ColorModal cValue={cValue}
                    bValue={bValue}
                    pValue={pValue}
                    onConfirm={(color, brightness, power) => {
                      lights.forEach(light => {
                        changeColor(light.id, color, brightness, power);
                        setColorModal(false);
                      });
                    }}
                    onCancel={() => setColorModal(false)}
        />
      )}
    </Card>
  );
}

export default Group;