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

const SEND = gql`
  mutation sendOneNumber($input: OneNumberInput!) {
    sendOneNumber(input: $input)
  }
`;

const NumberValue = ({ vector, value }) => {
  const [newval, setNewval] = useState(value.number);
  const [sendOneNumber] = useMutation(SEND);

  return (
    <Box key={value.name} direction="row" align="center">
      <Box width="small">{value.label || value.name}</Box>
      <Box width="small">{value.formated || value.number}</Box>
      {vector.permission !== 0 && (
        <Box direction="row" align="center" gap="xsmall">
          <TextInput
            value={newval}
            onChange={(e) => setNewval(e.target.value)}
          ></TextInput>
          <Button
            primary
            label="Set"
            onClick={() => {
              const input = {
                device: vector.device,
                property: vector.name,
                name: value.name,
                value: parseFloat(newval),
              };
              console.log(input);
              sendOneNumber({ variables: { input } }).then((data) => {
                console.log(data);
              });
            }}
          ></Button>
        </Box>
      )}
    </Box>
  );
};

const NumberVector = ({ vector }) => {
  return (
    <Box gap="xsmall">
      {vector.values.map((v) => (
        <NumberValue key={v.name} vector={vector} value={v} />
      ))}
    </Box>
  );
};

export default NumberVector;