hawkband-wled-client/components/Automation.js

import { useEffect, useState } from "react";
import { Button, Drawer, Icon, Steps, Typography } from "tiny-ui";

import { useLocalStorage } from "lib/state";
import { isBlank } from "lib/utils";

const { Step } = Steps;
const { Heading, Paragraph, Text } = Typography;

const Automation = ({
  automation,
  presets,
  clients,
  names,
  onPreset,
  onSync,
  onPower,
  ...props
}) => {
  const [current, setCurrent] = useLocalStorage(-1);
  const [total, setTotal] = useState();
  const [visible, setVisible] = useState(false);

  const getTitle = (indx) => presets?.[indx]?.name || indx;
  const getName = (v) => {
    let indx = clients?.findIndex((o) => o === v);
    return indx > -1 ? names?.[indx] : v;
  };
  const getDescription = (indx) => {
    return (
      (automation?.[indx] &&
        Object.keys(automation?.[indx])
          ?.map((o) => getName(o))
          ?.join(", ")) ||
      null
    );
  };

  const handleChange = (indx) => {
    let keys = Object.keys(automation?.[indx]);
    let preset = { clients: keys || [], value: indx };
    let power = { on: [], off: [] };
    let sync = { enable: [], disable: [] };
    // loop the keys and determine what to do
    for (let key of keys) {
      if (automation?.[indx]?.[key]?.on === true) power.on.push(key);
      else power.off.push(key);
      if (automation?.[indx]?.[key]?.sync === true) sync.enable.push(key);
      else sync.disable.push(key);
    }
    if (!isBlank(power?.on)) onPower({ clients: power?.on, value: "on" }); // power on
    if (!isBlank(power?.off)) onPower({ clients: power?.off, value: "off" }); // power off
    if (!isBlank(sync?.enable))
      onSync({ clients: sync?.enable, value: "enable" }); // enable sync
    if (!isBlank(sync?.disable))
      onSync({ clients: sync?.disable, value: "disable" }); // disable sync
    onPreset(preset); // apply the preset
  };

  useEffect(() => {
    setTotal((automation && Object.keys(automation)) || 0);
  }, [automation]);

  useEffect(() => {
    if (current > -1 && current < total) handleChange(current + 1);
  }, [current]);

  let steps = Object.keys(automation).map((o, i) => {
    return (
      <Step
        key={i}
        title={
          <>
            {getTitle(o)}
            {current === o - 1 ? (
              <div style={{ float: "right" }}>
                <Button
                  title="Reapply"
                  round
                  icon={<Icon name="loader-circle" />}
                  onClick={() => {
                    handleChange(o);
                  }}
                />
              </div>
            ) : null}
          </>
        }
        description={getDescription(o)}
      ></Step>
    );
  });

  return (
    <>
      <div style={{ position: "sticky", top: "60px", marginBottom: "2rem" }}>
        <Button.Group size="lg" round>
          <Button
            title="Previous"
            icon={<Icon name="arrow-left" />}
            onClick={() => {
              let next = current - 1;
              if (next < 0) next = 0;
              setCurrent(next);
            }}
          />
          <Button
            title="Reapply"
            icon={<Icon name="loader-circle" />}
            onClick={() => {
              handleChange(current);
            }}
          />
          <Button
            title="Next"
            icon={<Icon name="arrow-right" />}
            onClick={() => {
              let next = current + 1;
              if (next > total) next = 0;
              setCurrent(next);
            }}
          />
        </Button.Group>
        <Button.Group size="lg" round>
          <Button
            title="Help"
            icon={<Icon name="question-fill" />}
            onClick={() => {
              setVisible(true);
            }}
          />
        </Button.Group>
      </div>
      <Steps
        current={current}
        direction="vertical"
        onChange={(v) => setCurrent(v)}
      >
        {steps}
      </Steps>
      <Drawer
        header="Introduction"
        placement="right"
        size={480}
        onClose={() => setVisible(false)}
        visible={visible}
      >
        <>
          <Paragraph>
            Select one of the presets from the left to start applying preset
            automation.
          </Paragraph>
          <Paragraph>
            You can use the navigation buttons above to advance forward{" "}
            <Icon name="arrow-right" size={16} /> and backward{" "}
            <Icon name="arrow-left" size={16} /> through the preset list.
          </Paragraph>
          <Paragraph>
            If a preset fails to apply to all of the intended WLED instances
            then use the Reapply button <Icon name="loader-circle" size={16} />{" "}
            within the navigation menu bar or within the target step.
          </Paragraph>
        </>
      </Drawer>
    </>
  );
};

export default Automation;