import { Link } from 'react-router-dom';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';
import { useMutation } from '@apollo/client';
import { CREATE_AUDIENCE } from '../schema/mutations';
import {
  CreateAudienceMutation,
  CreateAudienceMutationVariables,
} from 'types/graphql';

import { useSimpleForm } from 'hooks/useSimpleForm';

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

interface CreateAudienceSuccessModalProps {
  name: string;
  onDismiss?: () => void;
}

const CreateAudienceSuccessModal = ({
  name,
  onDismiss,
}: CreateAudienceSuccessModalProps) => {
  return (
    <ModalContainer title="Audience created">
      <Box spacingY={4}>
        <Text align="center">
          Audience <b>{name}</b> was successfully created
        </Text>

        <Box display="flex" column spacingY={2}>
          <Button
            as={Link}
            to={`${HOMEPAGE.facebook}`}
            onClick={onDismiss}
            className="tac tdn"
            color="blue"
          >
            Go to Audience Manager
          </Button>
          <Button onClick={onDismiss} color="gray">
            Close
          </Button>
        </Box>
      </Box>
    </ModalContainer>
  );
};

interface CreateAudienceModalProps {
  collectionId: string;
  allianceId?: string;
  onDismiss?: () => void;
}

export const CreateAudienceModal = ({
  collectionId,
  allianceId,
  onDismiss,
}: CreateAudienceModalProps) => {
  const [submit, mutation] = useMutation<
    CreateAudienceMutation,
    CreateAudienceMutationVariables
  >(CREATE_AUDIENCE);

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

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

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

  const isLoading = mutation.loading;

  return mutation.data ? (
    <CreateAudienceSuccessModal
      name={mutation.data.audience.name}
      onDismiss={onDismiss}
    />
  ) : (
    <ModalContainer title="Create Audience">
      <form onSubmit={handleSubmit} className="spacingY4">
        <Box position="relative" spacingY={2}>
          <Input
            name="name"
            value={state.name}
            onChange={handleChange}
            placeholder="Audience name"
            disabled={isLoading}
            autoFocus
          />
          <Input
            name="description"
            value={state.description}
            onChange={handleChange}
            placeholder="Audience description"
            disabled={isLoading}
          />
          <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}
          >
            Create
          </Button>
        </Box>
      </form>
    </ModalContainer>
  );
};