import React from 'react';
import { useRouter } from 'next/router';
import { IContext } from 'beta/typings/context';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import { AddDelegate } from './containers/AddDelegate';
import { useCustomerNameQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

const COLOR = 'pink';

type SkrefProps = {
  customerId: string;
};

const Skref = ({ customerId }: SkrefProps) => {
  const { t } = useTranslation('stillingar');
  const { query } = useRouter();
  const { data, loading } = useCustomerNameQuery({
    variables: {
      input: {
        id: customerId,
      },
    },
  });
  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/stillingar?tab=tengilidir`}
      title={query.delegateId ? t('contactsTab.editDelegate') : t('contactsTab.addDelegate')}
      subTitle={loading ? '...' : data?.customer?.nickname ?? ''}
      icon="internet"
    >
      <AddDelegate customerId={customerId} />
    </StepWrapper>
  );
};

Skref.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    namespacesRequired: ['steps', 'stillingar'],
  };
};

export default Skref;