lucifer/webui/src/Components/Light.jsx

import React, {useState} from "react";
import {Badge, ButtonDropdown, Col, DropdownItem, DropdownMenu, DropdownToggle, ListGroupItem, Row} from "reactstrap";
import ColorModal from "./Modals/ColorModal";
import {changeColor} from "../Helpers/lights";
import LightPropertiesModal from "./Modals/LightPropertiesModal";

function Light({id, groupId, name, on, color, brightness}) {
  const [modal, setModal] = useState(false);
  const [dropDown, setDropDown] = useState(false);
  const [propModal, setPropModal] = useState(false);

  return (
    <ListGroupItem>
      <Row>
        <Col xs={7}>
          <ButtonDropdown isOpen={dropDown} toggle={() => setDropDown(!dropDown)}>
            <DropdownToggle size="sm" caret outline color="secondary">
              {name}
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem onClick={() => setPropModal(true)}>Egenskaper</DropdownItem>
              <DropdownItem>Glem</DropdownItem>
            </DropdownMenu>
          </ButtonDropdown>
        </Col>
        <Col xs={3}>
          {on && (
            <Badge style={{backgroundColor: `#${color}`}} onClick={() => setModal(true)}>
              {color.toUpperCase()}
            </Badge>
          )}
        </Col>
        <Col xs={2}>
          <Badge style={{backgroundColor: `gray(${brightness})`}} onClick={() => setModal(true)}>
            {on ? brightness : "Av"}
          </Badge>
        </Col>
      </Row>
      {modal && (
        <ColorModal cValue={color}
                    bValue={brightness}
                    pValue={on}
                    onConfirm={(newColor, newBrightness, newPower) => {
                      changeColor(id, newColor, newBrightness, newPower);
                      setModal(false);
                    }}
                    onCancel={() => setModal(false)}
        />
      )}
      {propModal && (
        <LightPropertiesModal id={id}
                              gValue={groupId}
                              nValue={name}
                              onClose={() => setPropModal(false)}/>
      )}
    </ListGroupItem>
  );
}

export default Light;