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 MeQuery from 'graphql/queries/me';
import Wrapper from 'components/app-layout/Wrapper';

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

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

class About extends React.Component<IAboutProps> {
  static getInitialProps({ asPath }: any) {
    return {
      link: asPath,
      namespacesRequired: ['common', 'settings'],
    };
  }
  render() {
    const {
      link,
      t,
      ui: { pageColor },
    } = this.props;

    return (
      <Wrapper>
        <SEO title={t('settings')} />
        <Settings link={link} color={pageColor}>
          <MeQuery errorPolicy="ignore">
            {({ data, error, loading }) => {
              if (error) {
                return <DefaultError />;
              }
              if (loading) {
                return <div>{t('query.fetchingData')}</div>;
              }
              if (!data || !data.me || !data.me.userProfile) {
                return <div>{t('query.missingData')}</div>;
              }

              return <AboutContainer color={pageColor} user={data.me.userProfile} />;
            }}
          </MeQuery>
        </Settings>
      </Wrapper>
    );
  }
}

export default withTranslation('common')(inject('ui')(observer(About)));