import * as React from 'react';
import { inject } from 'mobx-react';

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

import Settings from '../../containers/settings/Settings';
import SimcardSettingsContainer from 'beta/pages/thjonustur/[serviceId]/stillingar/containers/SimcardSettingsContainer';
import { useSimcardQuery } from 'typings/graphql';
import { IContext } from 'typings/context';
import UI from 'store/ui';
import Authentication from 'store/authentication';

interface ISimkortProps {
  subscriptionId: string;
  pathname: string;
  ui?: UI;
  authentication?: Authentication;
}

const SimkortPage = ({ subscriptionId, ui, authentication }: ISimkortProps) => {
  if (!ui || !authentication) {
    return <></>;
  }

  const { accountInput, isStaff } = authentication;
  const { loading, error, data } = useSimcardQuery({
    variables: { subscriptionId, accountInput },
  });

  const { t } = useTranslation('stillingar');

  if (loading) {
    return (
      <Settings subscriptionId={subscriptionId}>
        <div>Loading...</div>
      </Settings>
    );
  }

  if (error || !data?.me?.subscriptions.subscriptions) {
    return (
      <Settings subscriptionId={subscriptionId}>
        <div>Ekki tókst að sækja gögn</div>
      </Settings>
    );
  }

  const {
    me: {
      subscriptions: { subscriptions },
    },
  } = data;

  const { simcard, ssn, name } = subscriptions[0];

  if (!simcard) {
    return (
      <EmptyMessage
        title={t('general.noSettings')}
        description={t('general.noSettingsDescription')}
      />
    );
  }

  return (
    <Settings subscriptionId={subscriptionId}>
      <SimcardSettingsContainer
        isStaff={isStaff}
        subscriptionId={subscriptionId}
        color={ui.pageColor}
        userName={name}
        userNationalId={ssn}
      />
    </Settings>
  );
};

SimkortPage.getInitialProps = ({ query }: IContext) => {
  return {
    subscriptionId: query.subscriptionId,
    namespacesRequired: ['stillingar'],
  };
};

export default inject('ui', 'authentication')(SimkortPage);