HULIO

import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { AntForm } from '@src/features/AntForm';
import { AntFormSelectProps } from '@src/features/AntForm/fields';
import { LanguageQueryKey } from '@shared/components/LanguageSelect';
import { useQueryFetch } from '@shared/hooks/useQueryFetch';

const RouteExpeditedArea = ({ ...props }: AntFormSelectProps) => {
    const { t } = useTranslation(['translation']);
    const form = AntForm.useFormInstance();

    const stationFromId = AntForm.useWatch('stationFromId', form);
    const stationToId = AntForm.useWatch('stationToId', form);
    const routeTypeId = AntForm.useWatch('routeTypeId', form);
    const expeditionAreas = AntForm.useWatch('expeditionAreas', form);
    const [substitutedCountries, setSubstitutedCountries] = useState<
        { value: string; label: string; disabled: string; color: string }[]
    >([]);

    useQueryFetch<
        {
            value: string;
            label: string;
            disabled: string;
            color: string;
        }[]
    >(
        `Dictionaries/Get/Countries?StationId=${stationFromId}&StationId=${stationToId}`,
        {
            queryKey: [LanguageQueryKey, stationFromId, stationToId],
            enabled: !!stationFromId || !!stationToId,
            onSuccess: (data) => {
                if (!data.data && !Array.isArray(data.data)) return;

                setSubstitutedCountries(data.data);

                const newExpeditionAreas = data.data.map(
                    (country) => country.value,
                );

                const mapExpeditionAreas =
                    expeditionAreas === undefined
                        ? []
                        : expeditionAreas.map(
                              (
                                  item:
                                      | {
                                            value: string;
                                        }
                                      | string,
                              ) =>
                                  typeof item === 'string' ? item : item.value,
                          );

                const updatedExpeditionAreas = Array.from(
                    new Set([...mapExpeditionAreas, ...newExpeditionAreas]),
                );

                form.setFieldsValue({
                    expeditionAreas: updatedExpeditionAreas,
                });
            },
        },
    );

    const getLabel = useCallback(
        (value: string): string => {
            const findItem = substitutedCountries.find((item) => {
                return item.value === value;
            });

            if (findItem) return findItem.label;

            return value;
        },
        [substitutedCountries],
    );

    if (routeTypeId === 'e11d6969-e50e-48bf-afb9-d37e65e7eea6') return null;

    console.log('expeditionAreas', expeditionAreas);

    return (
        <AntForm.Select
            allowClear
            label={t('translation:expeditedArea')}
            mode='multiple'
            name='expeditionAreas'
            placeholder={t('translation:expeditedArea')}
            rules={[{ required: true }]}
            fieldProps={{
                labelRender: (value) => {
                    if (value.label) return value.label;

                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    return getLabel(value.value as any);
                },
            }}
            query={{
                url: 'Dictionaries/Get/Countries',
                queryKey: [LanguageQueryKey],
            }}
            {...props}
        />
    );
};

export default RouteExpeditedArea;