import * as React from 'react';
import { inject } from 'mobx-react';
import { useTranslation } from 'utils/i18n';
import { Button, PaymentSection } from '@nova-hf/ui';

import LinkWrapper from 'components/link-wrapper/LinkWrapper';

import Settings from '../../containers/settings/Settings';
import UI from 'store/ui';
import Authentication from 'store/authentication';

interface IProps {
  subscriptionId: string;
  authentication?: Authentication;
  ui?: UI;
}

const Page = ({ subscriptionId, authentication, ui }: IProps) => {
  if (!authentication) return null;
  const { accountInput } = authentication;
  const { t } = useTranslation('stillingar');

  return (
    <Settings subscriptionId={subscriptionId}>
      <PaymentSection
        title={t('relocation.title')}
        subtitle={t('relocation.subtitle')}
        smallerTitle
        fullWidth
        noSpacingTop
      >
        <Button
          background={ui?.pageColor}
          linkComponent={
            <LinkWrapper href={`/${accountInput.ssn}/thjonusta/${subscriptionId}/flutningur`} />
          }
        >
          {t('relocation.registerRelocation')}
        </Button>
      </PaymentSection>
    </Settings>
  );
};

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

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