import { useState } from 'react';
import { useMutation } from '@apollo/client';
import { KLAVIYO_IMPORT } from '../schema';
import {
  KlaviyoImportMutation,
  KlaviyoImportMutationVariables,
} from 'types/graphql';
import { handleGraphQLError } from 'lib/appsync/utils';
import { QUOTA_EXCEEDED_EXCEPTION } from 'lib/appsync/errorTypes';
import { call } from 'utils/call';

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

interface ImportKlaviyoCollectionModalProps {
  title?: string;
  segments: string[];
  workspaceId: string;
  defaultName?: string;
  onComplete?: () => void;
  onDismiss: () => void;
}

export const ImportKlaviyoCollectionModal = ({
  title = 'Import segments as',
  segments,
  workspaceId,
  defaultName = '',
  onDismiss,
  onComplete,
}: ImportKlaviyoCollectionModalProps) => {
  const [submit, { loading, error }] = useMutation<
    KlaviyoImportMutation,
    KlaviyoImportMutationVariables
  >(KLAVIYO_IMPORT);

  const [name, setName] = useState<string>(defaultName);

  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
    setName(ev.target.value);
  };

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (ev) => {
    ev.preventDefault();

    const variables = { workspaceId, collectionName: name, listIds: segments };

    try {
      await submit({ variables });
      call(onComplete);
      call(onDismiss);
    } catch (error) {
      console.error(error);
    }
  };

  const exception = handleGraphQLError(error, QUOTA_EXCEEDED_EXCEPTION);
  if (exception) {
    return (
      <UpgradeSubscriptionModal
        message={exception.message}
        onDismiss={onDismiss}
      />
    );
  }

  return (
    <ModalContainer title={title}>
      <form onSubmit={handleSubmit}>
        <Input
          value={name}
          onChange={handleChange}
          placeholder="Collection name"
          onFocus={(ev) => ev.target.select()}
          disabled={loading}
          autoFocus
        />
        <Box display="flex" marginY={4} spacing={2}>
          <Button
            type="button"
            onClick={onDismiss}
            color="gray"
            block
            disabled={loading}
          >
            Cancel
          </Button>
          <Button
            type="submit"
            // onClick={handleSubmit}
            color="blue"
            block
            disabled={!name || loading}
          >
            {error ? 'Try again' : 'Save'}
          </Button>
        </Box>
      </form>
      {error && <Text align="center">Something went wrong</Text>}
      <Spinner show={loading} />
    </ModalContainer>
  );
};