import * as React from 'react';
import { inject } from 'mobx-react';
import { useQuery } from '@apollo/client';
import { isEmpty } from 'lodash';
import { EmptyMessage, ContainerDeprecated, Container } from '@nova-hf/ui';
import LoadingContent from 'components/loading-placeholder/LoadingContent';
import { SUBSCRIPTION } from 'graphql/queries/subscription';
import { AUTOREFILLS } from 'graphql/queries/autorefills';
import DateSVG from 'assets/svg/date.svg';
import { useTranslation } from 'utils/i18n';

import { IUserData } from 'typings';
import Profile from 'store/models/Profile';

import SubscriptionProfile from './SubscriptionProfile';

import NovaTvSubscriptionProfile from './nova-tv/NovaTvSubscriptionProfile';

import Authentication, { IAccount } from 'store/authentication';

interface IProps {
  subscriptionId: string;
}

interface ISubscriptionProps extends IProps {
  color?: string;
  pack: string;
  parentId?: string;
  authentication?: Authentication;
}

interface IPrepaidProps {
  profile: Profile;
  pack: string;
  accountInput: IAccount;
}

const ErrorComponent = ({ subscriptionId }: IProps) => {
  const { t } = useTranslation('subscription');
  return (
    <EmptyMessage
      title={t('subscription.errorTitle')}
      description={t('subscription.errorMessage', { subscription: subscriptionId })}
    >
      <DateSVG />
    </EmptyMessage>
  );
};

const PrepaidSubscription = ({ accountInput, profile, pack }: IPrepaidProps) => {
  const { subscriptionId } = profile;

  const { loading, data } = useQuery<IUserData>(AUTOREFILLS, {
    variables: { accountInput, subscriptionId },
    errorPolicy: 'ignore',
  });

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!data?.me?.subscriptions?.subscriptions[0]) {
    return <div>Villa</div>;
  }

  const {
    me: {
      subscriptions: { subscriptions },
    },
  } = data;
  const { autoRefills } = subscriptions[0];

  profile.updateAutoRefills(autoRefills);

  return <SubscriptionProfile profile={profile} packId={pack} subscriptionId={subscriptionId} />;
};

const Subscription = ({ subscriptionId, pack, authentication, ...rest }: ISubscriptionProps) => {
  if (!authentication) return null;
  const { accountInput } = authentication;

  const { loading, error, data } = useQuery<IUserData>(SUBSCRIPTION, {
    variables: { accountInput, subscriptionId },
  });
  if (loading) {
    return (
      <ContainerDeprecated underBar row spacing>
        <LoadingContent />
      </ContainerDeprecated>
    );
  }

  if (error || !data || isEmpty(data) || !data.me) {
    return (
      <ContainerDeprecated underBar row spacing>
        <ErrorComponent subscriptionId={subscriptionId} {...rest} />
      </ContainerDeprecated>
    );
  }

  const {
    me: { profiles },
  } = data;

  if (!profiles[0]) {
    return (
      <ContainerDeprecated underBar row spacing>
        <ErrorComponent subscriptionId={subscriptionId} {...rest} />
      </ContainerDeprecated>
    );
  }

  const profile = new Profile(profiles[0]);

  if (profile.isNovaTV) {
    return (
      <ContainerDeprecated underBar row spacing>
        <NovaTvSubscriptionProfile subscriptionId={subscriptionId} />
      </ContainerDeprecated>
    );
  }

  if (profile.isPrepaid) {
    return (
      <ContainerDeprecated underBar row spacing>
        <PrepaidSubscription profile={profile} pack={pack} accountInput={accountInput} />
      </ContainerDeprecated>
    );
  }

  if (profile.type === 'fiber') {
    return (
      <Container>
        <SubscriptionProfile profile={profile} packId={pack} subscriptionId={subscriptionId} />
      </Container>
    );
  }
  return (
    <ContainerDeprecated underBar row spacing>
      <SubscriptionProfile profile={profile} packId={pack} subscriptionId={subscriptionId} />
    </ContainerDeprecated>
  );
};

export default inject('authentication')(Subscription);