import React, { ReactNode } from 'react';
import { Box } from '@nova-hf/ui';
import Authentication from 'beta/store/authentication';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useContractQuery } from 'typings/graphql';

import AlltSamanContractWrapper from './contract-types/AlltSamanContractWrapper';
import FiberContractWrapper from './contract-types/FiberContractWrapper';

type ContractWrapperProps = {
  authentication?: Authentication;
  children?: ReactNode;
  isLoading?: boolean;
};

const ContractWrapper = ({ children, isLoading }: ContractWrapperProps) => {
  const router = useRouter();
  const { data, loading, error } = useContractQuery({
    variables: {
      input: {
        id: (router.query.contractId as string) ?? '',
      },
    },
  });

  if (error) {
    return <Box padding={30}>Something went wrong!</Box>;
  }

  const productName = data?.contract?.variant?.productName;
  const isFiber = productName?.toLowerCase().includes('ljós');

  return (
    <>
      {productName === 'AlltSaman' && (
        <AlltSamanContractWrapper isLoading={!data || loading || isLoading}>
          {children}
        </AlltSamanContractWrapper>
      )}
      {isFiber && (
        <FiberContractWrapper isLoading={!data || loading || isLoading}>
          {children}
        </FiberContractWrapper>
      )}
    </>
  );
};

export default inject('authentication')(observer(ContractWrapper));