import React from 'react';
import Router from 'next/router';
import { Progress, ContainerDeprecated } from '@nova-hf/ui';

import AddExtraContact from 'containers/add-extra-contact/AddExtraContact';
import Wrapper from 'components/app-layout/Wrapper';
import { inject } from 'mobx-react';
import Authentication from 'store/authentication';

const COLOR = 'purple';

interface INyrPros {
  authentication?: Authentication;
}

const Nyr = ({ authentication }: INyrPros) => {
  if (!authentication) {
    return null;
  }

  const {
    accountInput: { ssn },
  } = authentication;

  const onClose = () => {
    Router.push(`/${ssn}/stillingar/tengilidir`).then(() => window.scrollTo(0, 0));
  };

  return (
    <Wrapper header="none" noFooter>
      <Progress
        length={1}
        steps={['Bæta við tengilið']}
        current={1}
        color={COLOR}
        highestStep={1}
        changeStep={() => {}}
        onClose={onClose}
      />
      <ContainerDeprecated spacing underBar>
        <AddExtraContact color={COLOR} onComplete={onClose} />
      </ContainerDeprecated>
    </Wrapper>
  );
};

Nyr.getInitialProps = () => {
  return {
    namespacesRequired: ['settings', 'common'],
  };
};

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