import React, { ReactNode } from 'react';
import { Box } from '@nova-hf/ui';
import FiberServiceWrapper from 'beta/containers/layout/service-types/FiberServiceWrapper';
import MobileServiceWrapper from 'beta/containers/layout/service-types/MobileServiceWrapper';
import TvServiceWrapper from 'beta/containers/layout/service-types/TvServiceWrapper';
import Authentication from 'beta/store/authentication';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { ServiceType, useGetServiceTypeQuery } from 'typings/graphql';

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

const ServiceContainer = ({ children, isLoading }: ServiceContainerProps) => {
  const router = useRouter();
  const { data, loading, error } = useGetServiceTypeQuery({
    variables: {
      serviceId: (router.query.serviceId as string) ?? '',
    },
  });

  const type = data?.service?.type;

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

  return (
    <>
      {(type === ServiceType.Mobile ||
        type === ServiceType.MobileInternet ||
        type === ServiceType.Landline) && (
        <MobileServiceWrapper isLoading={loading || isLoading}>{children}</MobileServiceWrapper>
      )}
      {type === ServiceType.Fiber && (
        <FiberServiceWrapper isLoading={loading || isLoading}>{children}</FiberServiceWrapper>
      )}
      {type === ServiceType.Tv && (
        <TvServiceWrapper isLoading={loading || isLoading}>{children}</TvServiceWrapper>
      )}
    </>
  );
};

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