import * as React from 'react';
import SEO from 'utils/SEO';
import { withTranslation, WithTranslation } from 'utils/i18n';
import { observer, inject } from 'mobx-react';
import { DefaultError } from '@nova-hf/ui';

import DepartmentsQuery from 'graphql/queries/departments';
import Wrapper from 'components/app-layout/Wrapper';

import Settings from './containers/settings/Settings';

import Departments from './containers/settings/Departments';

interface IDeildirProps extends WithTranslation {
  ui?: any;
  profiles?: any;
  link: string;
}

class Deildir extends React.Component<IDeildirProps> {
  static getInitialProps({ asPath }: any) {
    return {
      link: asPath,
      namespacesRequired: ['settings'],
    };
  }

  render() {
    const {
      link,
      t,
      ui: { pageColor },
      profiles: { isCompany },
    } = this.props;

    return isCompany ? (
      <Wrapper>
        <SEO title={t('settings')} />
        <Settings link={link} color={pageColor}>
          <DepartmentsQuery variables={{ servicesRequired: false }}>
            {(props) => {
              const { loading, error, data } = props;

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

              if (error || !data || !data.me) {
                return <DefaultError />;
              }

              const {
                me: { departments, ssn },
              } = data;

              return <Departments departments={departments} ssn={ssn} />;
            }}
          </DepartmentsQuery>
        </Settings>
      </Wrapper>
    ) : (
      <Wrapper>
        <Settings link={link} color={pageColor}>
          <div>{t('departments.userNotCompany')}</div>
        </Settings>
      </Wrapper>
    );
  }
}

export default withTranslation('settings')(inject('profiles', 'ui')(observer(Deildir)));