import { useNavigate } from 'react-router-dom';
import { PATHS as SETTINGS } from 'pages/settings';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';
import { useMutation, useQuery } from '@apollo/client';
import { KLAVIYO_EXPORT, KLAVIYO_STATUS } from '../schema';
import {
  KlaviyoExportMutation,
  KlaviyoExportMutationVariables,
  KlaviyoStatusQuery,
} from 'types/graphql';
import { call } from 'utils/call';

import { useSimpleForm } from 'hooks/useSimpleForm';

import { ModalContainer } from 'components/modals';
import { Box, Button, Spinner, Text } from 'components/common';
import { Input } from 'components/inputs';

interface KlaviyoExportResponseModalProps {
  name: string;
  error?: Error;
  onDismiss?: () => void;
}

const KlaviyoExportResponseModal = ({
  name,
  error,
  onDismiss,
}: KlaviyoExportResponseModalProps) => {
  return (
    <ModalContainer title={!error ? 'Exporting...' : 'Nothing to export'}>
      <Box spacingY={4}>
        {!error ? (
          <Text size="s" align="center">
            List <b>{name}</b> will soon appear in your Klaviyo account. You'll
            get an email when the export is complete.
          </Text>
        ) : (
          <Text size="s" align="center">
            {error.message}
          </Text>
        )}

        <Box display="flex" column spacingY={2}>
          <Button onClick={onDismiss} color="blue">
            Close
          </Button>
        </Box>
      </Box>
    </ModalContainer>
  );
};

interface KlaviyoExportModalProps {
  collectionId: string;
  onAccept?: () => void;
  onDismiss?: () => void;
}

export const KlaviyoExportModal = ({
  collectionId,
  onAccept,
  onDismiss,
}: KlaviyoExportModalProps) => {
  const navigate = useNavigate();
  const { data, ...query } = useQuery<KlaviyoStatusQuery>(KLAVIYO_STATUS);
  const [submit, mutation] = useMutation<
    KlaviyoExportMutation,
    KlaviyoExportMutationVariables
  >(KLAVIYO_EXPORT);

  const [state, handleChange] = useSimpleForm({
    name: '',
    description: '',
  });

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (ev) => {
    ev.preventDefault();
    if (!state.name) return;

    call(onAccept);

    const variables = {
      name: state.name,
      collectionId,
    };
    try {
      await submit({ variables });
    } catch (error) {
      console.error(error);
    }
  };

  const redirectToSettings = () => {
    navigate(`/${HOMEPAGE.settings}/${SETTINGS.integrations}#klaviyo`);
    call(onDismiss);
  };

  const isLoading = query.loading || mutation.loading;

  return mutation.data || mutation.error ? (
    <KlaviyoExportResponseModal
      name={state.name}
      error={mutation.error}
      onDismiss={onDismiss}
    />
  ) : (
    <ModalContainer title="Export to Klaviyo as...">
      <form onSubmit={handleSubmit} className="spacingY4">
        <Box position="relative" spacingY={2}>
          {isLoading || data?.klaviyo?.status === 'connected' ? (
            <Input
              name="name"
              value={state.name}
              onChange={handleChange}
              placeholder="List name"
              disabled={isLoading}
              autoFocus
            />
          ) : (
            <Button
              type="submit"
              block
              onClick={redirectToSettings}
              color="blue"
              size="l"
            >
              Connect Klaviyo
            </Button>
          )}
          <Spinner show={isLoading} />
        </Box>
        <Box display="flex" marginY={4} spacing={2}>
          <Button block onClick={onDismiss} color="gray">
            Cancel
          </Button>
          <Button
            block
            type="submit"
            // onClick={handleSubmit}
            color="blue"
            disabled={!state.name || isLoading}
          >
            Export
          </Button>
        </Box>
      </form>
    </ModalContainer>
  );
};