import React, { useEffect, useState } from "react";

import { useQuery, useSubscription, useMutation } from "@apollo/react-hooks";
import gql from "graphql-tag";
import { deviceInfoFragment, propertyVectorFragment } from "./graphql/fragment";
import Device from "./components/indi/device";
import { Box, Tabs, Tab, Button, Header, Heading } from "grommet";
import { isConnectedQuery } from "./graphql/query";

const GETDEVICES = gql`
  query devices {
    devices {
      id
      ...DeviceInfo
      properties {
        id
        name
        ...PropertyVector
      }
    }
  }

  ${deviceInfoFragment}
  ${propertyVectorFragment}
`;

const CONNECT = gql`
  mutation connect {
    connect
  }
`;

const DISCONNECT = gql`
  mutation disconnect {
    disconnect
  }
`;

const useIndiState = () => {
  const { data } = useQuery(isConnectedQuery);
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    data && setConnected(data.connected);
  }, [data]);

  return connected;
};

const Devices = () => {
  const connected = useIndiState();
  const { data } = useQuery(GETDEVICES);
  const [connect] = useMutation(CONNECT);
  const [disconnect] = useMutation(DISCONNECT);

  if (!data || !data.devices) {
    return <div>No data</div>;
  }

  return (
    <Box fill background="light-3">
      <Header background="brand" pad="small">
        <Box>
          <Heading margin="xsmall" level={2}>
            AST(RAW)NOMY
          </Heading>
        </Box>
        <Box direction="row" gap="xsmall">
          <Button
            label="Capture"
            onClick={() => {
            }}
          />
          <Button
            label="INDI panel"
            onClick={() => {
            }}
          />
          {!connected ? (
            <Button
              label="Connect"
              onClick={() => {
                connect();
              }}
            />
          ) : (
            <Button
              label="Disconnect"
              onClick={() => {
                disconnect();
              }}
            />
          )}
        </Box>
      </Header>

      <Box overflow="auto">
        {data ? (
          <Tabs justify="start">
            {data && data.devices ? (
              data.devices.map((d) => (
                <Tab title={d.name} key={d.id}>
                  <Device device={d} />
                </Tab>
              ))
            ) : (
              <div>no devices</div>
            )}
          </Tabs>
        ) : null}
      </Box>
    </Box>
  );
};

export default Devices;