hawkband-wled-client/components/Automation.js

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

const { Step } = Steps;

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

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

  useEffect(() => {
    if (current > -1) {
      let indx = current + 1;
      let payload = {
        clients: automation?.[indx] || [],
        value: indx
      };
      onPreset(payload);
    }
  }, [current]);

  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]?.map((o) => getName(o))?.join(", ");
  };

  let steps = Object.keys(automation).map((o, i) => {
    return <Step key={i} title={getTitle(o)} description={getDescription(o)} />;
  });

  return (
    <Row>
      <Col span="12">
        <Steps
          current={current}
          direction="vertical"
          onChange={(v) => setCurrent(v)}
        >
          {steps}
        </Steps>
      </Col>
      <Col span="12">
        <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="Next"
            icon={<Icon name="arrow-right" />}
            onClick={() => {
              let next = current + 1;
              if (next > total) next = 0;
              setCurrent(next);
            }}
          />
        </Button.Group>
      </Col>
    </Row>
  );
};

export default Automation;