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

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

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

  ${propertyVectorFragment}
  ${deviceInfoFragment}
`;

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);
  const [openMsg, setOpenMsg] = useState(false);

  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={() => {}} />
          {true ? (
            <Button
              label="Connect"
              onClick={() => {
                connect();
              }}
            />
          ) : (
            <Button
              label="Disconnect"
              onClick={() => {
                disconnect();
              }}
            />
          )}
          <Button icon={<Contact />} onClick={() => setOpenMsg(true)} />
        </Box>
      </Header>

      {false && (
        <Layer full="vertical" position="right" modal={false}>
          <Box width="medium" fill="vertical">
            bla
          </Box>
        </Layer>
      )}

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

export default Devices;