import React, { useState, useEffect } from "react";
import { useMutation } from "@apollo/react-hooks";
import { driversToInterfaces } from "../../utils/indi";
import Property from "./property";
import gql from "graphql-tag";
import { Box, Button, Tabs, Tab } from "grommet";

const CONNECT_DEVICE = gql`
  mutation connectDevice($id: String!) {
    connectDevice(id: $id) {
      id
    }
  }
`;

const Device = ({ device }) => {
  const [connect] = useMutation(CONNECT_DEVICE, {
    variables: { id: device.id },
  });
  const [groups, setGroups] = useState([]);
  const [selectedTabs, setSelectedTabs] = useState({});
  const [currentTab, setCurrentTab] = useState(0);

  useEffect(() => {
    const groups = new Set();
    device.properties.forEach((v) => {
      groups.add(v.vector.group);
    });
    setGroups(Array.from(groups));
    setCurrentTab(selectedTabs[device.id] || 0);
  }, [device]);

  return (
    <Box>
      {!device.connected && (
        <Button
          label="Connect"
          onClick={() => {
            connect();
          }}
        />
      )}
      <Tabs justify="start" activeIndex={currentTab} onActive={(nextTab) => {
        setCurrentTab(nextTab);
        const newValue = { ...selectedTabs };
        newValue[device.id] = nextTab;
        setSelectedTabs(newValue)
      }}>
        {groups.map((g) => (
          <Tab title={g} key={g}>
            <Box pad="small">
              {device.properties &&
                device.properties
                  .filter((p) => p.vector.group === g)
                  .map((p) => <Property property={p} key={p.id} />)}
            </Box>
          </Tab>
        ))}
      </Tabs>
    </Box>
  );
};

export default Device;