import { useQuery } from '@apollo/client';
import { KLAVIYO_STATUS } from 'components/klaviyo/schema';
import { KlaviyoStatusQuery } from 'types/graphql';

import { useModal } from 'components/layers';

import { Button } from 'components/common';
import {
  ConnectKlaviyoModal,
  DisconncetKlaviyoModal,
} from 'components/klaviyo/modals';

export const KlaviyoSettings = () => {
  const { data } = useQuery<KlaviyoStatusQuery>(KLAVIYO_STATUS);

  const connectKlaviyoModal = useModal(ConnectKlaviyoModal);
  const disconncetKlaviyoModal = useModal(DisconncetKlaviyoModal);

  const isConnected = data?.klaviyo?.status === 'connected';

  return (
    <div className="flex alignCenter justifyBetween paddingX4 fz14">
      <div>Klaviyo account</div>
      {data ? (
        isConnected ? (
          <Button onClick={() => disconncetKlaviyoModal.show()} color="red">
            Disconnect
          </Button>
        ) : (
          <Button onClick={() => connectKlaviyoModal.show()}>Connect</Button>
        )
      ) : null}
    </div>
  );
};