import * as React from 'react';
import { useQuery } from '@apollo/client';
import { Button, Payment, PaymentSection } from '@nova-hf/ui';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import UI from 'store/ui';
import { IUserData } from 'typings';
import { isStringPhoneNumber } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

import Settings from '../../containers/settings/Settings';
import { SUBSCRIPTION_PLAN } from '../thjonustuleid/queries/thjonustuleid';

interface UppsognProps {
  authentication?: any;
  ui?: UI;
}

const Uppsogn = ({ ui, authentication }: UppsognProps) => {
  const router = useRouter();
  const color = ui?.pageColor ?? 'pink';
  const subscriptionId = router?.query?.subscriptionId;
  const { accountInput } = authentication;
  const { loading, error, data } = useQuery<IUserData>(SUBSCRIPTION_PLAN, {
    variables: { subscriptionId, accountInput },
  });
  const subscription = data?.me.subscriptions.subscriptions[0];
  const title = subscription?.title;
  const isPhoneNumber = isStringPhoneNumber(title ?? '');
  const rateplanTitle = subscription?.rateplan?.title;
  const usedTitle = isPhoneNumber ? rateplanTitle?.toLowerCase() : title;
  const { t } = useTranslation('stillingar');

  return (
    <Settings subscriptionId={subscriptionId?.toString() ?? ''}>
      <Payment noContainer>
        <PaymentSection
          smallerTitle
          fullWidth
          noSpacingTop
          title={
            isPhoneNumber
              ? t('plan.cancelPhoneNumber', { subscriptionTitle: usedTitle })
              : t('plan.cancelService', { subscriptionTitle: usedTitle })
          }
          subtitle={
            isPhoneNumber
              ? t('plan.cancelServiceDescription')
              : t('plan.cancelServiceDescriptionAlltSaman')
          }
        >
          {loading || error ? (
            <div>...</div>
          ) : (
            <Button
              linkComponent={
                <LinkWrapper href={`/${accountInput.ssn}/thjonusta/${subscriptionId}/uppsogn`} />
              }
              outline={color}
              background="white"
              text={color}
            >
              {isPhoneNumber
                ? t('plan.cancelPhoneNumber', { subscriptionTitle: usedTitle })
                : t('plan.cancelService', { subscriptionTitle: usedTitle })}
            </Button>
          )}
        </PaymentSection>
      </Payment>
    </Settings>
  );
};

Uppsogn.getInitialProps = ({ query }: any) => {
  return {
    subscriptionId: query.subscriptionId,
    namespacesRequired: ['stillingar'],
  };
};

export default inject('authentication', 'ui')(Uppsogn);