help me optimize and fix


/* eslint-disable array-callback-return */
/* eslint-disable no-lone-blocks */
/* eslint-disable sort-keys */
/* eslint-disable no-plusplus */
/* eslint-disable no-tabs */
/* eslint-disable max-len */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/function-component-definition */
import * as React from 'react';
import { ChangeEvent, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
	Input, Radio, RadioChangeEvent, Typography,
} from 'antd';
import '../../styles/Restrictions.css';
import { ConsoleSqlOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import { SentenceCase } from '../../../data/utils/functions';

// nombre
// key
// depende de elemento | undefined.

interface Myelement {
	children: {
		descLabel?: string,
		key?: string,
		name: string,
		max?: number,
		dependsMax?: number,
		dependsOn?: string,
		placeholder?: string,
		radioElement?: string[],
		type?: string,
		value?: string | number
	}[],
	nameLabel?: string,
	descLabel?: string
}

const GenerateFields = () => {
	const { t } = useTranslation();
	const [ inputValues, setinputValues ] = useState<{ [key: string]: string }>();
	const [ errorInputs, setErrorInputs ] = useState<{ [key: string]: string }>();
	const [ showError, setShowError ] = useState(false);
	const [ errorMessage, setErrorMessage ] = useState(t('Modal.Range_Between'));
	const [ defaultRadio, setDefaultRadio ] = useState('High season');

	const items: Myelement[] = [
		{
			nameLabel: 'Prices',
			descLabel: 'Peel',
			children: [
				{
					descLabel: 'Nombre de Calculo',
					key: 'calculationName',
					name: 'calculationName',
					placeholder: '$/t',
					max: 30,
					value: 20,
				},
			],
		},
		{
			children: [
				{
					name: 'SeasonElement',
					radioElement: [
						'High season', 'No demand',
					],
					type: 'radio',
				},

			],
		},
		{
			children: [
				{
					descLabel: 'Molienda Total Deseada',
					key: 'desiredTotalGrind',
					name: 'desiredTotalGrind',
					placeholder: '$/t',
				},
				{
					dependsOn: 'desiredTotalGrind',
					descLabel: 'Molienda Soja Temporal',
					key: 'desiredTotalGrind',
					name: 'tempSoyGrind',
					placeholder: '$/t',
				},
			],
		},
	];

	const findInItemsByName = nameToFind => {
		const result = items.flatMap(item => item.children);
		const foundObj = result.find(obj => obj.name === nameToFind);
		return foundObj ? foundObj.dependsOn : null;
	};
	const getMaxByName = nameToFind => {
		const result = items.flatMap(item => item.children);
		const foundObj = result.find(obj => obj.name === nameToFind);
		return foundObj ? foundObj.max : null;
	};

	const handleRadioChange = (e: RadioChangeEvent) => {
		setDefaultRadio(e.target.value);
	};

	const handleInputChange = (
		event: React.ChangeEvent<HTMLInputElement>,
	 ) => {
		const { name, value, type } = event.target;
		const dependsOn = findInItemsByName(name);
		setErrorMessage(t('Modal.Range_Between'));

		if (dependsOn) {
			if (inputValues && dependsOn && parseFloat(value) > parseFloat(inputValues[dependsOn])) {
				setErrorInputs({ ...errorInputs, [name]: value });
				setErrorMessage('bestia no puede ser mmayot');
			} else {
				const newErrorlist = { ...errorInputs };
				delete newErrorlist[name];
				setErrorInputs(newErrorlist);
			}
		} else {
			const element = getMaxByName(name);
			if (element && parseFloat(value) > element) {
				setErrorInputs({ ...errorInputs, [name]: value });
			} else {
				const newErrorlist = { ...errorInputs };
				delete newErrorlist[name];
				setErrorInputs(newErrorlist);
			}
		}
		setinputValues({ ...inputValues, [name]: value });
	};

	const resultado = items.map(parent => {
		const itemsresult = parent.children.map(item => {
			const disable = !!(item.dependsOn && !inputValues?.[item.dependsOn]);
			return (
				<div className="inputs">
					{item.type === 'radio' && item.radioElement !== undefined
						? (
							<div className="itemInputs">
								<Radio.Group onChange={handleRadioChange} value={defaultRadio}>
									{item.radioElement.map((option, index) => (
										<Radio key={option} value={option}>
											{option}
										</Radio>
									))}

								</Radio.Group>
							</div>
						)

						:						item.descLabel && (
							<div style={{ marginBottom: '0.5em' }}>
								<Typography className={`itemDescription ${showError ? 'error' : ''}`}>
									{SentenceCase(t(item.descLabel))}
								</Typography>
							</div>
						)}
					{item.type === 'radio' && (
						<div className="input-with-placeholders">
							<Input
								key={item.key}
								className="itemInputs"
								disabled={disable}
								name={item.name}
								onChange={handleInputChange}
								// placeholder={value ? `${value}` : 'Input a value'}
								style={{ borderColor: errorInputs?.[item.name] ? '#CD0D15' : 'initial' }}
								value={inputValues?.[item.name] || ''}
							/>
							<div className={disable === true ? 'right-placeholder-disabled' : 'right-placeholder'}>
								{errorInputs?.[item.name]
									? <ExclamationCircleFilled style={{ color: '#CD0D15', fontSize: '19px' }} />
									: item.placeholder}
							</div>
						</div>,
					)}
				</div>

			);
		});
		return (
			<div className="group-inputs">
				{parent.nameLabel && (
					<div className="itemTile">
						{parent.nameLabel}
					</div>
				)}
				{itemsresult}
			</div>
		);
	});

	return (
		<div className="container">
			{
				resultado
			}
		</div>

	);
};

export default GenerateFields;