import { useCallback, useEffect, useMemo, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { FormProvider, useForm } from 'react-hook-form';
import { useMutation, useQuery } from 'react-query';
import { useNavigate, useParams } from 'react-router';

import { zodResolver } from '@hookform/resolvers/zod';
import { type TFunction } from 'i18next';
import { useDebounce } from '@material-hu/hooks/useDebounce';
import useHuPagination from '@material-hu/hooks/useHuPagination';
import { useModal } from '@material-hu/hooks/useModal';
import {
  IconInfoCircle,
  IconPlus,
  IconSettings,
} from '@material-hu/icons/tabler';
import Grid from '@material-hu/mui/Grid';
import IconButton from '@material-hu/mui/IconButton/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuDialog from '@material-hu/components/design-system/Dialog';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuStateCard from '@material-hu/components/design-system/StateCard';
import HuTitle from '@material-hu/components/design-system/Title';

import { queryClient } from 'src/config/react-query';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useLocalStorage from 'src/hooks/useLocalStorage';
import { type User } from 'src/types/user';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';

import CircularProgress from 'src/components/CircularProgress';

import ActivateModuleCard from '../components/ActivateModuleCard';
import ContainerLayout from '../components/ContainerLayout';
import useModuleConfiguration from '../hooks/useModuleConfiguration';
import useServiceMgmtPermissions from '../hooks/useServiceMgmtPermissions';
import useSnackbar from '../hooks/useSnackbar';
import { NAME_MAX_LENGTH } from '../NewServiceItem/constants';
import { serviceManagementKeys } from '../queries';
import { serviceManagementRoutes } from '../routes';
import {
  changeServiceItemStatus,
  deleteServiceItem,
  duplicateServiceItem,
  getServiceItems,
} from '../services';
import {
  BannerColor,
  ServiceItemStatus,
  type ServiceItemTableData,
  ServiceManagementRole,
  ServicesSortingCriteria,
  type ServiceTag,
} from '../types';
import { getToggleRequestStatus, parseServiceFiltersToParams } from '../utils';

import CategoriesSidebar from './components/CategoriesSidebar';
import ConfigurationDrawer from './components/ConfigurationDrawer';
import ServicesTable from './components/ServicesTable';
import { createServiceFilterFormSchema } from './form/schemas';
import useCategories from './hooks/useCategories';

export type ConfigurationForm = {
  coverColor: BannerColor;
  csatEnabled: boolean;
};

export type ServiceFilters = {
  statuses: ServiceItemStatus[];
  tags: ServiceTag[];
  createdBy: User[];
  creationDateFrom: Date | null;
  creationDateTo: Date | null;
  dateOptions: {
    lastSevenDays: boolean;
    lastFourteenDays: boolean;
    lastThirtyDays: boolean;
    dateRange: boolean;
  };
};

const DEFAULT_SERVICE_FILTERS = {
  statuses: [],
  tags: [],
  createdBy: [],
  creationDateFrom: null,
  creationDateTo: null,
  dateOptions: {
    lastSevenDays: false,
    lastFourteenDays: false,
    lastThirtyDays: false,
    dateRange: false,
  },
};

const ServiceItems = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation(['service_management', 'general']);
  const { showSnackbar } = useSnackbar();

  const navigate = useNavigate();
  const { categoryId } = useParams();

  const { canCreateServiceItems } = useServiceMgmtPermissions();

  const [selectedServiceItem, setSelectedServiceItem] =
    useState<ServiceItemTableData | null>(null);
  const [openConfigurationDrawer, setOpenConfigurationDrawer] = useState(false);

  const [previousSelectedConfiguration, setPreviousSelectedConfiguration] =
    useState<ConfigurationForm | null>(null);
  const [initializedLocalStorageFilters, setInitializedLocalStorageFilters] =
    useState(false);

  const [appliedFilters, setAppliedFilters] =
    useLocalStorage<ServiceFilters | null>(
      'service-table-applied-filters',
      null,
    );

  const filtersForms = useForm<ServiceFilters>({
    defaultValues: DEFAULT_SERVICE_FILTERS,
    resolver: zodResolver(createServiceFilterFormSchema(t as TFunction)),
    mode: 'onChange',
  });

  const {
    params: { pagination, order, orderBy, search },
    Search,
    HuTableSortingHeader,
    form: paginationForm,
    setPartialParams,
    Pagination,
  } = useHuPagination({
    defaultPage: 1,
    defaultOrderBy: 'CREATED_AT',
    defaultOrder: 'DESC',
    defaultLimit: 10,
  });

  const debouncedQuery = useDebounce(search);

  const {
    moduleActivated,
    moduleConfiguration,
    isLoadingModuleConfiguration,
    updateConfigurationMutation,
  } = useModuleConfiguration();

  const form = useForm<ConfigurationForm>({
    defaultValues: {
      coverColor: moduleConfiguration?.coverColor ?? BannerColor.BLUE,
      csatEnabled: moduleConfiguration?.csatEnabled ?? false,
    },
    mode: 'onChange',
  });

  useEffect(() => {
    if (appliedFilters && !initializedLocalStorageFilters) {
      filtersForms.reset(appliedFilters);
      setInitializedLocalStorageFilters(true);
    }
  }, [appliedFilters, initializedLocalStorageFilters, filtersForms.reset]);

  useEffect(() => {
    if (moduleConfiguration) {
      form.reset({
        coverColor: moduleConfiguration.coverColor,
        csatEnabled: moduleConfiguration.csatEnabled,
      });
    }
  }, [moduleConfiguration, form]);

  const statusTranslations = {
    ACTIVE: t('activated'),
    INACTIVE: t('deactivated'),
  };

  const filterParams = useMemo(() => {
    if (!appliedFilters) return {};

    return parseServiceFiltersToParams(appliedFilters);
  }, [appliedFilters]);

  const params = useMemo(() => {
    return {
      page: pagination.page,
      limit: pagination.limit,
      sortDirection: order === 'DESC_NULLS_LAST' ? 'DESC' : order,
      sortField: orderBy,
      name: debouncedQuery,
      categoryId,
      ...filterParams,
    };
  }, [
    pagination.page,
    pagination.limit,
    order,
    orderBy,
    debouncedQuery,
    categoryId,
    filterParams,
  ]);

  const { data, isLoading, isError, isPreviousData, isFetching } = useQuery(
    serviceManagementKeys.serviceItems.list(params),
    () =>
      getServiceItems({
        ...params,
      }),
    {
      select: response => response.data,
      keepPreviousData: true,
      enabled: moduleConfiguration?.stateMachineEnabled ?? false,
    },
  );

  const { categoriesQuery } = useCategories();

  const selectedCategory = useMemo(() => {
    if (!categoryId || !categoriesQuery) return null;
    const categories =
      categoriesQuery.data?.pages?.flatMap(p => p.data.items) || [];
    return categories.find(category => category.id === categoryId) || null;
  }, [categoryId, categoriesQuery]);

  const createDuplicateMutation = useMutation(
    ({ newName, id }: { prevName: string; newName: string; id: string }) =>
      duplicateServiceItem(id, newName),
    {
      onSuccess: async (_, { prevName }) => {
        await queryClient.invalidateQueries(
          serviceManagementKeys.serviceItems.all(),
        );
        showSnackbar({
          title: t('success_creating_duplicate', { name: prevName }),
          variant: 'success',
        });
      },
      onError: () => {
        showSnackbar({
          title: t('error_creating_duplicate'),
          variant: 'error',
        });
      },
    },
  );

  const handleOpenConfigurationDrawer = () => {
    setPreviousSelectedConfiguration(form.getValues());
    setOpenConfigurationDrawer(true);
  };

  const handleSelect = async () => {
    const formValues = form.getValues();
    await updateConfigurationMutation.mutateAsync({
      ...formValues,
    });
    setOpenConfigurationDrawer(false);
  };

  const handleClose = async () => {
    form.reset(previousSelectedConfiguration ?? {});
    setPreviousSelectedConfiguration(null);
    setOpenConfigurationDrawer(false);
  };

  const handleEdit = useCallback(() => {
    if (selectedServiceItem) {
      if (!categoryId) {
        navigate(serviceManagementRoutes.edit(selectedServiceItem.id), {
          state: {
            navigatedFromCatalog: true,
          },
        });
      } else {
        navigate(serviceManagementRoutes.edit(selectedServiceItem.id), {
          state: {
            categoryId,
            navigatedFromCatalog: true,
          },
        });
      }
    }
  }, [selectedServiceItem, categoryId, navigate]);

  const { mutate: duplicateMutate } = createDuplicateMutation;
  const handleDuplicate = useCallback(
    (serviceItem: ServiceItemTableData) => {
      let newName = `${t('copy_of')} ${serviceItem.name}`;
      if (newName.length > NAME_MAX_LENGTH) {
        newName = newName.substring(0, NAME_MAX_LENGTH);
      }
      duplicateMutate({
        prevName: serviceItem.name,
        newName,
        id: serviceItem.id,
      });
    },
    [t, duplicateMutate],
  );

  const handleChangeServiceItemStatus = (
    newStatus: ServiceItemStatus,
    callback: () => void,
  ) => {
    if (!selectedServiceItem) return;
    changeStatusMutation.mutateAsync(newStatus, {
      onSettled: callback,
    });
  };

  const deleteMutation = useMutation(
    (serviceItem: ServiceItemTableData) => deleteServiceItem(serviceItem.id),
    {
      onSuccess: (_, serviceItem: ServiceItemTableData) => {
        queryClient.invalidateQueries(serviceManagementKeys.serviceItems.all());
        showSnackbar({
          title: t('delete_service_item_confirmation', {
            name: serviceItem.name,
          }),
          variant: 'success',
        });
      },
    },
  );

  const changeStatusMutation = useMutation(
    (newStatus: ServiceItemStatus) =>
      changeServiceItemStatus(selectedServiceItem?.id!, newStatus),
    {
      onSuccess: (_, newStatus: ServiceItemStatus) => {
        queryClient.invalidateQueries(serviceManagementKeys.serviceItems.all());

        logEvent(LogEvents.SERVICE_MGMT_SERVICE_STATUS_CHANGED, {
          serviceId: selectedServiceItem?.id,
          role: ServiceManagementRole.ADMIN,
          serviceName: selectedServiceItem?.name,
          categoryId: selectedServiceItem?.category?.id,
          categoryName: selectedServiceItem?.category?.name,
          stateName: selectedServiceItem?.status,
          status: newStatus,
        });

        showSnackbar({
          title: t('change_service_item_status_success', {
            name: selectedServiceItem?.name,
            status:
              statusTranslations[newStatus as keyof typeof statusTranslations],
          }),
          variant: 'success',
        });
      },
      onError: () => {
        showSnackbar({
          title: t('change_service_item_status_error'),
          variant: 'error',
        });
      },
    },
  );

  const handleSelectCategory = (categoryIdToNavigateTo: string | null) => {
    if (categoryIdToNavigateTo === null) {
      navigate(serviceManagementRoutes.serviceItems());
    } else {
      navigate(
        serviceManagementRoutes.serviceItemsByCategory(categoryIdToNavigateTo),
      );
    }
  };

  const handleNavigateNewServiceItem = () => {
    if (!categoryId) {
      navigate(serviceManagementRoutes.newServiceItem());
    } else {
      navigate(serviceManagementRoutes.newServiceItem(), {
        state: {
          categoryId,
          navigatedFromCatalog: true,
        },
      });
    }
  };

  const handleApplyFilters = useCallback(() => {
    const values = filtersForms.getValues();
    setAppliedFilters(values);
    setPartialParams(
      {
        page: 1,
      },
      true,
    );
  }, [filtersForms, setAppliedFilters, setPartialParams]);

  const handleResetFilters = useCallback(() => {
    filtersForms.reset({
      ...DEFAULT_SERVICE_FILTERS,
    });
  }, [filtersForms]);

  const handleRestoreFilters = useCallback(() => {
    if (appliedFilters) {
      filtersForms.reset(appliedFilters);
    } else {
      filtersForms.reset(DEFAULT_SERVICE_FILTERS);
    }
  }, [appliedFilters, filtersForms]);

  const handleTagDeleted = useCallback(
    (tagId: string) => {
      // Update applied filters in localStorage
      if (appliedFilters?.tags?.length) {
        const updatedTags = appliedFilters.tags.filter(
          (tag: ServiceTag) => tag.id !== tagId,
        );
        const updatedFilters = {
          ...appliedFilters,
          tags: updatedTags,
        };
        setAppliedFilters(updatedFilters);
      }

      // Update form state
      const currentFormTags = filtersForms.getValues('tags') ?? [];
      if (currentFormTags.length) {
        const updatedFormTags = currentFormTags.filter(
          (tag: ServiceTag) => tag.id !== tagId,
        );
        filtersForms.setValue('tags', updatedFormTags);
      }
    },
    [appliedFilters, setAppliedFilters, filtersForms],
  );

  const getSortingHeaderTooltip = useCallback(
    (id: ServicesSortingCriteria) => {
      if (id !== orderBy) {
        return t('general:sort');
      }
      if (
        id === ServicesSortingCriteria.CREATED_AT ||
        id === ServicesSortingCriteria.UPDATED_AT
      ) {
        if (order === 'DESC_NULLS_LAST' || order === 'DESC' || !order) {
          return t('sorting_date_desc');
        }
        return t('sorting_date_asc');
      }
      return undefined;
    },
    [orderBy, order, t],
  );

  const {
    showModal: openDeleteModal,
    modal: deleteModal,
    closeModal: closeDeleteModal,
  } = useModal(() => (
    <HuDialog
      title={t('confirm_delete_service_item_title')}
      textBody={
        selectedServiceItem?.status === ServiceItemStatus.ACTIVE
          ? t('confirm_delete_service_item_description')
          : t('confirm_delete_service_item_draft_description')
      }
      onClose={closeDeleteModal}
      primaryButtonProps={{
        variant: 'primary',
        loading: changeStatusMutation.isLoading,
        disabled: deleteMutation.isLoading,
        children:
          selectedServiceItem?.status === ServiceItemStatus.ACTIVE
            ? t('general:deactivate')
            : t('general:cancel'),
        onClick:
          selectedServiceItem?.status === ServiceItemStatus.ACTIVE
            ? () =>
                handleChangeServiceItemStatus(
                  ServiceItemStatus.INACTIVE,
                  closeDeleteModal,
                )
            : closeDeleteModal,
      }}
      secondaryButtonProps={{
        variant: 'tertiary',
        loading: deleteMutation.isLoading || changeStatusMutation.isLoading,
        children: t('general:delete'),
        onClick: () => {
          if (!selectedServiceItem) return;
          if (selectedServiceItem?.status === ServiceItemStatus.ACTIVE) {
            confirmDeleteActiveServiceItemModal.showModal();
            closeDeleteModal();
          } else {
            deleteMutation.mutate(selectedServiceItem, {
              onSettled: closeDeleteModal,
            });
          }
        },
      }}
    />
  ));

  const {
    showModal: openActivateModal,
    modal: activateModal,
    closeModal: closeActivateModal,
  } = useModal(() => (
    <HuDialog
      title={t('confirm_activate_service_item_title')}
      textBody={t('confirm_activate_service_item_description')}
      onClose={closeActivateModal}
      primaryButtonProps={{
        variant: 'primary',
        loading: changeStatusMutation.isLoading,
        children: t('general:activate'),
        onClick: () =>
          handleChangeServiceItemStatus(
            ServiceItemStatus.ACTIVE,
            closeActivateModal,
          ),
      }}
      secondaryButtonProps={{
        variant: 'tertiary',
        disabled: changeStatusMutation.isLoading,
        children: t('general:cancel'),
        onClick: closeActivateModal,
      }}
    />
  ));

  const {
    showModal: openDeactivateModal,
    modal: deactivateModal,
    closeModal: closeDeactivateModal,
  } = useModal(() => (
    <HuDialog
      title={t('confirm_deactivate_service_item_title')}
      textBody={t('confirm_deactivate_service_item_description')}
      onClose={closeDeactivateModal}
      primaryButtonProps={{
        loading: changeStatusMutation.isLoading,
        children: t('general:deactivate'),
        onClick: () =>
          handleChangeServiceItemStatus(
            ServiceItemStatus.INACTIVE,
            closeDeactivateModal,
          ),
      }}
      secondaryButtonProps={{
        disabled: changeStatusMutation.isLoading,
        children: t('general:cancel'),
        onClick: closeDeactivateModal,
      }}
    />
  ));

  const confirmDeleteActiveServiceItemModal = useModal(
    () => {
      const methods = useForm<{ deleteInput: string }>({
        defaultValues: { deleteInput: '' },
      });
      const deleteInput = methods.watch('deleteInput');
      return (
        <FormProvider {...methods}>
          <HuDialog
            title={t('confirm_delete_service_item_title')}
            onClose={confirmDeleteActiveServiceItemModal.closeModal}
            body={
              <Stack sx={{ gap: 1.5 }}>
                <Typography
                  variant="globalS"
                  sx={{
                    color: ({ palette }) => palette.textColors?.neutralText,
                  }}
                >
                  {t('delete_service_item_confirmation_description')}
                </Typography>
                <HuFormInputClassic
                  name="deleteInput"
                  inputProps={{
                    label: t('delete_service_item_confirmation_input_label', {
                      delete: t('general:delete').toUpperCase(),
                    }),
                    hasCounter: false,
                  }}
                />
              </Stack>
            }
            primaryButtonProps={{
              variant: 'primary',
              children: t('general:delete'),
              loading: deleteMutation.isLoading,
              disabled: deleteInput !== t('general:delete').toUpperCase(),
              onClick: () => {
                if (selectedServiceItem) {
                  deleteMutation.mutate(selectedServiceItem, {
                    onSettled: confirmDeleteActiveServiceItemModal.closeModal,
                  });
                }
              },
            }}
            secondaryButtonProps={{
              variant: 'tertiary',
              children: t('general:cancel'),
              disabled: deleteMutation.isLoading,
              onClick: () => {
                confirmDeleteActiveServiceItemModal.closeModal();
                setSelectedServiceItem(null);
              },
            }}
          />
        </FormProvider>
      );
    },
    {
      maxWidth: 'sm',
    },
  );

  const handleDelete = useCallback(() => {
    openDeleteModal();
  }, [openDeleteModal]);

  const handleToggleStatus = useCallback(
    (serviceItem: ServiceItemTableData) => {
      const newStatus = getToggleRequestStatus(serviceItem.status);

      if (newStatus === ServiceItemStatus.ACTIVE) {
        openActivateModal();
      } else {
        openDeactivateModal();
      }
    },
    [openActivateModal, openDeactivateModal],
  );

  const hasAppliedFilters = useMemo(() => {
    return (
      Object.values(appliedFilters ?? {}).some(value => value !== null) ||
      !!debouncedQuery.trim()
    );
  }, [appliedFilters, debouncedQuery]);

  const emptyData = !data?.items || data?.items?.length === 0;
  const showEmptyCard =
    emptyData &&
    !debouncedQuery &&
    !isError &&
    !isLoading &&
    !isFetching &&
    !hasAppliedFilters;
  const showEmptySearch = emptyData && !isLoading && hasAppliedFilters;
  const showError = emptyData && isError;
  const showContent = !isLoadingModuleConfiguration && moduleActivated;
  const showActivateModuleCard =
    !moduleActivated && !isLoadingModuleConfiguration;
  const hasSelectedCategory = categoryId != null;

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('service_items_list_title'))}</title>
      </Helmet>
      {deleteModal}
      {activateModal}
      {deactivateModal}
      {confirmDeleteActiveServiceItemModal.modal}
      <FormProvider {...form}>
        <ConfigurationDrawer
          open={openConfigurationDrawer}
          onClose={handleClose}
          onSelect={handleSelect}
          loading={isLoadingModuleConfiguration}
          loadingAction={updateConfigurationMutation.isLoading}
        />

        <Stack
          sx={{
            backgroundColor: ({ palette }) =>
              palette.new.background.layout.tertiary,
            height: 1,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              p: 3,
              borderBottom: ({ palette }) =>
                `1px solid ${palette.new.border.neutral.default}`,
            }}
          >
            <HuTitle
              variant="XL"
              title={t('service_items_list_title')}
            />
            {!showActivateModuleCard && (
              <IconButton
                aria-label={t('configuration')}
                variant="secondary"
                onClick={handleOpenConfigurationDrawer}
              >
                <IconSettings />
              </IconButton>
            )}
          </Stack>
          {isLoadingModuleConfiguration && <CircularProgress centered />}
          {showActivateModuleCard && (
            <ContainerLayout>
              <ActivateModuleCard />
            </ContainerLayout>
          )}
          {showContent && (
            <Grid
              container
              wrap="nowrap"
              sx={{
                flex: 1, // grow to fill vertical space
                overflow: 'hidden',
              }}
            >
              <Grid
                item
                sx={{
                  height: 1,
                  width: 256,
                  borderRight: ({ palette }) =>
                    `1px solid ${palette.new.border.neutral.default}`,
                  overflowY: 'auto',
                }}
              >
                <CategoriesSidebar
                  selectedCategoryId={categoryId}
                  onSelectCategory={handleSelectCategory}
                />
              </Grid>
              <Grid
                item
                sx={{
                  flex: 1,
                  height: 1,
                  backgroundColor: ({ palette }) =>
                    palette.new.background.layout.default,
                  overflowY: 'auto',
                }}
              >
                <ContainerLayout
                  maxWidth={false}
                  sx={{
                    maxWidth: '1920px',
                    px: 2,
                    pt: 4,
                    pb: 3,
                    gap: 2,
                    display: 'flex',
                    flexDirection: 'column',
                  }}
                >
                  <Stack
                    sx={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                    }}
                  >
                    <HuTitle
                      variant="L"
                      title={
                        hasSelectedCategory
                          ? (selectedCategory?.name ?? '')
                          : t('all')
                      }
                      copetin={t('service_items')}
                    />
                    <Stack
                      sx={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        gap: 1,
                      }}
                    >
                      {canCreateServiceItems && (
                        <Button
                          size="large"
                          variant="primary"
                          startIcon={<IconPlus size={11} />}
                          onClick={handleNavigateNewServiceItem}
                        >
                          {t('create_service_item')}
                        </Button>
                      )}
                    </Stack>
                  </Stack>
                  {showEmptyCard && (
                    <HuStateCard
                      title={
                        categoryId
                          ? t('empty_service_item_list_title_category')
                          : t('empty_service_item_list_title')
                      }
                      description={t('empty_service_item_list_description')}
                      variant="primary"
                      icon={IconInfoCircle}
                      primaryAction={
                        canCreateServiceItems
                          ? {
                              label: t('create_service_item'),
                              onClick: handleNavigateNewServiceItem,
                            }
                          : undefined
                      }
                    />
                  )}
                  {!showEmptyCard && (
                    <FormProvider {...filtersForms}>
                      <ServicesTable
                        totalPages={data?.totalPages || 0}
                        isLoading={isLoading}
                        isError={showError}
                        isEmpty={showEmptySearch}
                        isPreviousData={isPreviousData}
                        data={data}
                        handleEdit={handleEdit}
                        handleDuplicate={handleDuplicate}
                        handleToggleStatus={handleToggleStatus}
                        handleDelete={handleDelete}
                        selectedServiceItem={selectedServiceItem}
                        setSelectedServiceItem={setSelectedServiceItem}
                        onApplyFilters={handleApplyFilters}
                        onResetFilters={handleResetFilters}
                        onRestoreFilters={handleRestoreFilters}
                        appliedFilters={appliedFilters}
                        onTagDeleted={handleTagDeleted}
                        Pagination={Pagination}
                        Search={Search}
                        SortingHeader={HuTableSortingHeader}
                        paginationForm={paginationForm}
                        getSortingHeaderTooltip={getSortingHeaderTooltip}
                      />
                    </FormProvider>
                  )}
                </ContainerLayout>
              </Grid>
            </Grid>
          )}
        </Stack>
      </FormProvider>
    </HuGoThemeProvider>
  );
};

export default ServiceItems;