Untitled

import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import SelectVehicleAsync from '@/core/components/SelectAsyncSingle/SelectAsyncVehicle';
import { ContentHeaderDouble } from '@/core/components/ContentHeader';
import Heading from '@/core/components/Heading';
import RestClient from '@/core/api';

type Vehicle = {
  id: number;
  name: string;
  licensePlate: string;
  vin: string;
  deviceId: string;
};

const fetchInvoiceAddresses = async () => {
  try {
    const response = await fetch('/api/invoice-addresses'); // Промени endpoint-а според бекенда
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching invoice addresses:', error);
    return [];
  }
};

const formatInvoiceAddresses = addresses => {
  return addresses.map(address => ({
    value: address.customerNo,
    label: `${address.customerNo} | ${address.countryCode} | ${address.name} | ${address.city}`,
  }));
};

const OnCommerceGlobalPreview: React.FunctionComponent = () => {
  const { t } = useTranslation(['administration']);
  const [options, setOptions] = useState([]);
  const [vehicle, setVehicle] = useState<null | Vehicle>(null);

  useEffect(() => {
    const loadInvoiceAddresses = async () => {
      const addresses = await fetchInvoiceAddresses();
      setOptions(formatInvoiceAddresses(addresses));
    };
    loadInvoiceAddresses();
  }, []);

  return (
    <ContentHeaderDouble
      first={
        <Heading>
          {t('administration:fleet.freeDigitalServices.activation.header')}
        </Heading>
      }
      second={
        <SelectVehicleAsync
          onChange={o => {
            setVehicle(o as Vehicle);
          }}
          value={vehicle}
          loadOptions={async e => {
            const u = new URL(
              '/api/portal/evo-bus-administration/vehicle-management/vehicles',
              window.location.origin
            );
            u.searchParams.set('q', e);
            const res: {
              options: Array<Vehicle>;
              moreResults: boolean;
            } = await RestClient.get(u.href);
            return res;
          }}
        />
      }
      variant={'1/2'}
    />
  );
};

export default OnCommerceGlobalPreview;