import React from 'react';
import { Box } from '@nova-hf/ui';
import { useRouter } from 'next/router';
import { ServiceStatus, ServiceType, useFiberServicesInfoQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import ServiceList, { ServiceItems } from '../../components/service-cards/ServiceList';

const FiberServiceList = () => {
  const { t } = useTranslation('alltSaman');
  const router = useRouter();
  const customerId = router.query.customerId;
  const serviceItem: ServiceItems[] = [];
  const color = 'pink';

  const { data, error, loading } = useFiberServicesInfoQuery({
    variables: {
      input: {
        userId: customerId as string,
        status: ServiceStatus.Active,
      },
    },
  });
  const fiberServices = data?.fiberServices.services;

  fiberServices?.map((fiber) => {
    serviceItem.push({
      key: fiber?.id ?? '',
      serviceTitle: fiber?.nickname ? fiber.nickname : fiber?.user?.name ? fiber.user.name : '',
      serviceDescription: fiber?.user?.legalEntity?.address ?? '',
    });
  });

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

  return (
    <Box>
      <ServiceList
        icon={'internet'}
        color={color}
        services={serviceItem}
        onClick
        type={ServiceType.Fiber}
        customerId={customerId as string}
        text={t('alltSaman.chooseFromInternets')}
      />
    </Box>
  );
};

export default FiberServiceList;