write jest tests import { useAttributesFormExtraArgs } from '@efsdf-ui/rapid-ufs';
import { NumberInput, Select, useFormValueSelector } from '@sber-efsdf-ui/ufs-form-components';

import { Flex, Text } from '@atomic-ui/react';

import type { IncrementType, InterestRatesFormState, RateIndex } from '$entities/rates';
import {
	AbsoluteRates,
	activePeriodIndexSelector,
	RateValueInput,
	SizeSpecialInterestRate,
	useActivePeriodStore,
} from '$features/interestRates';
import {
	floatingParamsSelector,
	getDefaultValueForAbsoluteRates,
	useRateSettings,
} from '../../../../../../model';

export const CriteriaDependency = () => {
	const { rateIndex } = useAttributesFormExtraArgs<RateIndex>();
	const activePeriodIndex = useActivePeriodStore(activePeriodIndexSelector);

	const { rateSettings } = useRateSettings();

	const { rateValue } = useFormValueSelector(
		(formState: InterestRatesFormState) =>
			floatingParamsSelector(formState, rateIndex, activePeriodIndex),
		[activePeriodIndex, rateIndex],
	);

	const { absoluteRates } = rateSettings.settingsRateType.FLOATING;
	const { percentValueIncrementType } = rateSettings.settingsRateType.SHARED;

	return (
		<>
			<Flex gap={4} direction="column">
				<Text fontWeight="semibold" typography="16_24">
					Размер переменной маржи при соблюдении критериев
				</Text>

				<AbsoluteRates
					absoluteRates={absoluteRates}
					defaultValue={getDefaultValueForAbsoluteRates({ absoluteRates })}
				/>
				{rateValue?.absoluteRate?.id === 'ABSOLUTE_VALUE' && (
					<Flex direction="column" gap={4} w="50%">
						<RateValueInput title="Размер переменной маржи, % годовых" fieldName="value" />
					</Flex>
				)}

				{rateValue?.absoluteRate?.id === 'WITHOUT_ABSOLUTE_VALUE' && (
					<Flex direction="column" gap="4">
						<Text color="gray.50" typography="14_24">
							Размер маржи по Договору должен обеспечивать размер расчетного уровня
						</Text>

						<SizeSpecialInterestRate />
					</Flex>
				)}
			</Flex>

			<Flex gap={4} direction="column">
				<Text fontWeight="semibold" typography="16_24">
					Размер переменной маржи при нарушении критериев
				</Text>

				<AbsoluteRates
					absoluteRates={absoluteRates}
					defaultValue={getDefaultValueForAbsoluteRates({ absoluteRates })}
				/>

				{rateValue?.absoluteRate?.id === 'ABSOLUTE_VALUE' && (
					<Flex direction="column" gap={4} w="50%">
						<RateValueInput title="Размер переменной маржи, % годовых" fieldName="increasedValue" />
					</Flex>
				)}

				{rateValue?.absoluteRate?.id === 'WITHOUT_ABSOLUTE_VALUE' && (
					<Flex direction="column" gap="4">
						<Text color="gray.50" typography="14_24">
							Маржа при выполнении критериев, увеличенная
						</Text>

						<Flex gap="4" w="full">
							<Select<InterestRatesFormState, Labeled<IncrementType>>
								title="Выберите значение"
								fieldName={`INTEREST_RATES.${rateIndex}.periods.${activePeriodIndex}.increasedValue.incrementCondition.incrementType`}
								items={percentValueIncrementType}
								labelExtractor={(item) => item.name}
								showClearIcon={false}
							/>

							<NumberInput<InterestRatesFormState>
								placeholder="0,00000000"
								fieldName={`INTEREST_RATES.${rateIndex}.periods.${activePeriodIndex}.increasedValue.incrementCondition.incrementValue`}
								config={{ isPositive: true, divisionalSize: 8 }}
							/>
						</Flex>
					</Flex>
				)}
			</Flex>
		</>
	);
};