hawkband-wled-client/components/Automation.js

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

import { useLocalStorage } from "lib/state";

const { Step } = Steps;
const { Paragraph } = Typography;

const Automation = ({
  clients,
  names,
  presets,
  automation,
  onAutomation,
  onPower,
  busy,
  ...props
}) => {
  const [current, setCurrent] = useLocalStorage("preset", -1, 3600);
  const [total, setTotal] = useState();
  const [help, setHelp] = 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
    );
  };

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

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

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

  return (
    <>
      <div style={{ position: "sticky", top: "60px", marginBottom: "2rem" }}>
        <Button.Group size="md" 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={() => {
              onAutomation(current + 1);
            }}
          />
          <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="md" round>
          <Button
            title="Power on"
            onClick={() => {
              onPower("on");
            }}
          >
            On
          </Button>
          <Button
            title="Power off"
            onClick={() => {
              onPower("off");
            }}
          >
            Off
          </Button>
        </Button.Group>
        <Button.Group size="md" round>
          <Button
            title="Help"
            icon={<Icon name="question-fill" />}
            onClick={() => {
              setHelp(true);
            }}
          />
        </Button.Group>
        {(busy && (
          <Button.Group size="md" round>
            <Button title="Busy" icon={<Icon spin name="loader-3quarter" />} />
          </Button.Group>
        )) ||
          null}
      </div>
      <Steps
        current={current}
        direction="vertical"
        onChange={(v) => setCurrent(v)}
      >
        {steps}
      </Steps>
    </>
  );
};

export default Automation;