import { useEffect } from 'react';
import { useNavigate } from 'react-router';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';
import { PATHS as SETTINGS } from 'pages/settings';
import { useQuery, useMutation } from '@apollo/client';
import { AD_ACCOUNTS } from '../schema/queries';
import { SHARE_AUDIENCE } from '../schema/mutations';
import {
  AdAccountsQuery,
  ShareAudienceMutation,
  ShareAudienceMutationVariables,
} from 'types/graphql';

import { handleGraphQLError } from 'lib/appsync/utils';
import { SERVICE_INFO_ERROR } from 'lib/appsync/errorTypes';
import { call } from 'utils/call';

import { useSimpleForm } from 'hooks/useSimpleForm';

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

function mapOptions(data: { id: string; name: string }[]) {
  return data.map((item) => ({
    id: item.id,
    value: item.id,
    label: item.name,
  }));
}

interface ShareAudienceModalProps {
  audienceId: string;
  onDismiss?: () => void;
}

export const ShareAudienceModal = ({
  audienceId,
  onDismiss,
}: ShareAudienceModalProps) => {
  const navigate = useNavigate();

  const { data, ...query } = useQuery<AdAccountsQuery>(AD_ACCOUNTS);
  const [submit, mutation] = useMutation<
    ShareAudienceMutation,
    ShareAudienceMutationVariables
  >(SHARE_AUDIENCE);

  const [state, handleChange, setState] = useSimpleForm({
    adAccountId: '',
  });

  useEffect(() => {
    if (data && data.accounts?.length === 1) {
      const first = data.accounts[0];
      setState((s) => ({ ...s, adAccountId: first.id }));
    }
  }, [data, setState]);

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

    const variables = {
      adAccountId: state.adAccountId,
      audienceId: audienceId,
    };

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

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

  const accounts = data?.accounts?.filter((acc) => acc.status !== 909) || [];
  const hasAccounts = Boolean(accounts?.length);

  const serviceError = handleGraphQLError(mutation.error, SERVICE_INFO_ERROR);

  return (
    <ModalContainer title="Share Audience">
      <form onSubmit={handleSubmit} className="spacingY4">
        <div className="spacingY2">
          <Select
            options={data && mapOptions(accounts)}
            name="adAccountId"
            value={state.adAccountId}
            onChange={handleChange}
            placeholder="Select Ad account"
            disabled={loading || !hasAccounts}
            autoFocus
          />
          {serviceError && (
            <Text size="s" align="center">
              {serviceError.message}
            </Text>
          )}
          <Spinner show={loading} />
        </div>
        {hasAccounts ? (
          <Box display="flex" spacing={2}>
            <Button color="gray" block onClick={onDismiss}>
              Cancel
            </Button>
            <Button
              type="submit"
              color="blue"
              block
              disabled={!state.adAccountId}
            >
              Share
            </Button>
          </Box>
        ) : (
          <Box spacingY={2}>
            {!loading && (
              <Button
                onClick={() => {
                  navigate(
                    `/${HOMEPAGE.settings}/${SETTINGS.integrations}#facebook`
                  );
                  call(onDismiss);
                }}
                type="button"
                block
              >
                Connect account
              </Button>
            )}
            <Button type="button" color="gray" block onClick={onDismiss}>
              Cancel
            </Button>
          </Box>
        )}
      </form>
    </ModalContainer>
  );
};