import React from "react";
import { Button, Box } from "grommet";
import gql from "graphql-tag";
import { useMutation } from "@apollo/react-hooks";

const SEND = gql`
  mutation sendSwitch($input: SwitchInput!) {
    sendSwitch(input: $input)
  }
`;

const SwitchVector = ({ vector }) => {
  const [sendSwitch] = useMutation(SEND);

  return (
    <Box direction="row" gap="xsmall">
      {vector.values.map((v) => (
        <Button
          primary={v.switch}
          key={v.name}
          label={v.label}
          onClick={() => {
            const newValues = vector.values.map((val) => {
              if (v.name === val.name) {
                return { name: val.name, value: true };
              } else {
                return {
                  name: val.name,
                  value: vector.rule === 0 ? false : val.switch,
                };
              }
            });
            const input = {
              device: vector.device,
              property: vector.name,
              values: newValues,
            };
            console.log(vector.rule);
            console.log(input);

            sendSwitch({
              variables: { input },
            }).then((data) => {
              console.log(data);
            });
          }}
        ></Button>
      ))}
    </Box>
  );
};

export default SwitchVector;