import { useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';
import { PATHS as SETTINGS } from 'pages/settings';
import { PATHS as WORKSPACE_PAGE } from 'pages/workspaces/$workspace';
import { useQuery } from '@apollo/client';
import { KLAVIYO_STATUS } from 'components/klaviyo/schema';
import { WORKSPACE } from 'components/workspace/schema/queries';
import { WorkspaceQuery, WorkspaceQueryVariables } from 'types/graphql';

import { useModal } from 'components/layers';

import { Box, Button, Spinner } from 'components/common';
import { Header } from 'components/Header';
import { ErrorBoundary } from 'components/ErrorBoundary';
import {
  ConnectKlaviyoModal,
  ImportKlaviyoCollectionModal,
} from 'components/klaviyo/modals';

import { KlaviyoImportScreen } from './KlaviyoImportScreen';

export const Klaviyo = () => {
  const { workspaceId } = useParams();
  const navigate = useNavigate();
  const { data: workspace } = useQuery<WorkspaceQuery, WorkspaceQueryVariables>(
    WORKSPACE,
    {
      variables: { workspaceId: workspaceId! },
      fetchPolicy: 'cache-first',
    }
  );

  const { data, ...query } = useQuery(KLAVIYO_STATUS);

  const [selection, setSelection] = useState<string[]>([]);

  const handleCheckbox: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
    const items = [...selection];
    const { value } = ev.target;
    const i = selection.indexOf(value);
    if (i !== -1) {
      items.splice(i, 1);
    } else {
      items.push(value);
    }
    setSelection(items);
  };

  const showImportModal = useModal(ImportKlaviyoCollectionModal, {
    defaultProps: {
      title: 'Import selected segments as',
      workspaceId: workspaceId!,
      segments: selection,
      onComplete: () => {
        navigate(
          `/${HOMEPAGE.workspace}/${workspaceId}/${WORKSPACE_PAGE.collections}`
        );
      },
    },
  });

  const loading = query.loading;
  const isConnected = data?.klaviyo?.status === 'connected';
  const isSelected = selection.length !== 0;

  return (
    <Box position="relative" display="flex" column height="100%">
      <Header
        className="sticky"
        style={{
          top: 0,
          zIndex: 1,
          borderBottom: '1px solid var(--borderColor)',
        }}
        title={
          isSelected
            ? `Import ${selection.length} segments`
            : 'Import from Klaviyo'
        }
        left={
          <Link to=".." className="c-black link">
            {workspace?.workspace?.name}
          </Link>
        }
        right={
          <Box spacing={2}>
            <Button
              onClick={() =>
                navigate(
                  `/${HOMEPAGE.settings}/${SETTINGS.integrations}#klaviyo`
                )
              }
              color="gray"
            >
              Settings
            </Button>
          </Box>
        }
      />
      {data ? (
        isConnected ? (
          <ErrorBoundary>
            <Box style={{ minWidth: '50%', margin: 'auto' }}>
              <KlaviyoImportScreen
                selected={selection}
                onSelect={handleCheckbox}
                onImport={showImportModal.show}
              />
            </Box>
          </ErrorBoundary>
        ) : (
          <ErrorBoundary>
            <Box flex="grow" display="flex" align="center" justify="center">
              <ConnectKlaviyoModal />
            </Box>
          </ErrorBoundary>
        )
      ) : null}
      <Spinner show={loading} />
    </Box>
  );
};