import { useState } from 'react';
import { useMutation } from '@apollo/client';
import { MAP_DATA } from '../schema';
import { MapDataMutation, MapDataMutationVariables } 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';

function mapValuesToInput(values: string[]) {
  return values.map((value, index) => ({ index, value }));
}

interface ConfirmLabelsModalProps {
  collectionId: string;
  fileName: string;
  values: string[];
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  onDismiss?: () => void;
  onComplete?: () => void;
  placeholder?: string;
}

export const ConfirmLabelsModal = ({
  collectionId,
  fileName,
  values,
  onChange,
  onDismiss,
  onComplete,
  placeholder,
}: ConfirmLabelsModalProps) => {
  const [submit, { loading, error }] = useMutation<
    MapDataMutation,
    MapDataMutationVariables
  >(MAP_DATA);

  const [name, setName] = useState(fileName);

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

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

    const input = mapValuesToInput(values);
    const variables = { collectionId, name, input };

    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="Collection name">
      <form onSubmit={handleSubmit}>
        <Input
          value={name}
          onChange={handleChange}
          placeholder={placeholder}
          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>
  );
};