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

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

import Wrapper from 'components/app-layout/Wrapper';
import { EmptyMessage } from '@nova-hf/ui';

import SubscriptionsLight from '../containers/subscriptions/SubscriptionsLight';

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

class Services extends React.Component<IServicesProps> {
  search = '';

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

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

  static getInitialProps({ query }: IServicesProps) {
    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.yourServices')} />
        {authentication.isStaff ? (
          <SubscriptionsLight color="pink" />
        ) : (
          <EmptyMessage
            title={t('common:errors.accessDenied.title')}
            description={t('common:errors.accessDenied.subtitle')}
          />
        )}
      </Wrapper>
    );
  }
}
export default withTranslation(['subscriptions', 'common'])(
  inject('authentication', 'ui')(observer(Services)),
);