hawkband-wled-client/components/Automation.js

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

import { fetcher, isArray, isEmpty } from "lib/utils";

import { useScreenSize } from "components";

const { Step } = Steps;

const Automation = ({
  clients,
  names,
  presets,
  automation,
  onAutomation,
  onPower,
  onPreset,
  busy
}) => {
  const [current, setCurrent] = useState(-1);
  const [preset, setPreset] = useState();
  const [total, setTotal] = useState();
  const { data, mutate } = useSWR("/api/state", fetcher);
  const screenSize = useScreenSize();

  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 && (!preset || preset !== current)) {
      onAutomation(current + 1, () => {
        mutate();
      });
    }
  }, [current, total]);

  useEffect(() => {
    if (preset && preset !== current) setCurrent(preset);
  }, [preset]);

  useEffect(() => {
    if (isArray(data) && !isEmpty(data)) {
      let ps = [...new Set(data?.map((o) => o?.ps))];
      if (ps.length === 1 && ps?.[0] !== 200) setPreset(ps?.[0] - 1);
    }
  }, [data]);

  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, () => {
                      mutate();
                    });
                  }}
                />
              </div>
            ) : null}
          </div>
        }
        description={getDescription(o)}
      ></Step>
    );
  });

  return (
    <>
      <div className="commandbar">
        <Button.Group size={screenSize?.width > 550 ? "lg" : "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, () => {
                mutate();
              });
            }}
          />
          <Button
            title="Next"
            icon={<Icon name="arrow-right" />}
            onClick={() => {
              let next = current + 1;
              if (next > total) next = 0;
              setCurrent(next);
            }}
          />
          <Button
            title="Initial state"
            icon={<Icon name="no-idea" />}
            onClick={() => {
              setCurrent(-1);
              setPreset(null);
              onPreset(200, () => {
                mutate();
              });
            }}
          />
          <Button
            title="Power on"
            onClick={() => {
              onPower("on", () => {
                mutate();
              });
            }}
          >
            On
          </Button>
          <Button
            title="Power off"
            onClick={() => {
              onPower("off", () => {
                mutate();
              });
            }}
          >
            Off
          </Button>
        </Button.Group>
      </div>
      <div>
        <Steps
          current={current}
          direction="vertical"
          onChange={(v) => setCurrent(v)}
        >
          {steps}
        </Steps>
      </div>
    </>
  );
};

export default Automation;