import * as React from 'react';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';

import { useTranslation } from 'utils/i18n';
import SEO from 'utils/SEO';

import Settings from './containers/settings/Settings';
import PaymentContainer from './containers/settings/Payment';
import UI from 'store/ui';

interface IPaymentProps {
  ui?: UI;
  link: string;
}

const Payment = ({ ui }: IPaymentProps) => {
  const { t } = useTranslation('settings');
  const router = useRouter();

  if (!ui) return null;

  return (
    <>
      <SEO title={t('sideMenu.paymentType')} />
      <Settings link={router.asPath} color={ui.pageColor}>
        <PaymentContainer color={ui.pageColor} />
      </Settings>
    </>
  );
};

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

export default inject('ui')(Payment);