import * as React from 'react';
import { observable, makeObservable } from 'mobx';
import { observer, inject } from 'mobx-react';

import { EmptyMessage } from '@nova-hf/ui';

import SEO from 'utils/SEO';
import { withTranslation, WithTranslation } from 'utils/i18n';

import Wrapper from 'components/app-layout/Wrapper';

import OpportunitiesList from '../containers/opportunitiesList/OpportunitiesList';

interface IOpportunitiesProps extends WithTranslation {
  query: any;
  rateplan: string;
  namespacesRequired: string[];
  authentication?: any;
  ui?: any;
}

class Opportunities extends React.Component<IOpportunitiesProps> {
  search = '';

  constructor(props: IOpportunitiesProps) {
    super(props);

    makeObservable(this, {
      search: observable,
    });
  }

  static getInitialProps({ query }: IOpportunitiesProps) {
    const { rateplan } = query;

    return {
      rateplan,
      namespacesRequired: ['common', 'subscriptions'],
    };
  }

  componentDidMount() {
    this.props.ui.setShowContactBubble(false);
  }

  componentWillUnmount() {
    this.props.ui.setShowContactBubble(true);
  }

  render() {
    const { t, authentication } = this.props;

    return (
      <Wrapper header="none" noFooter>
        <SEO title={t('index.yourOpportunities')} />
        {authentication.isStaff ? (
          <OpportunitiesList authentication={authentication} />
        ) : (
          <EmptyMessage
            title={t('common:errors.accessDenied.title')}
            description={t('common:errors.accessDenied.subtitle')}
          />
        )}
      </Wrapper>
    );
  }
}
export default withTranslation('subscriptions')(
  inject('authentication', 'ui')(observer(Opportunities)),
);