import Input from "../../UI/inputs/input"
import { MainButton } from "../../UI/buttons/mainButton";
import { useState } from "react";
import { ModalContainer, ModalTitle, ModalContent, ModalText, ButtonContainer } from "../style"
import { validateIPAddress } from "../../../utils/nodeController/validator";

interface Props {
    onSave?: (data: string) => void;
    onClose: () => void;
}

export const AddDevice = ({ onSave, onClose }: Props) => {
    const [ipAddress, setIpAddress] = useState('')
    const [error, setError] = useState(false)

    const handleSubmit = () => {
        if (!validateIPAddress(ipAddress)) {
            setError(true)
            return;
        }
        // e.preventDefault(); // Предотвращаем перезагрузку страницы
        if (onSave && ipAddress) {
            setError(false)
            onSave(ipAddress);
            onClose();
        }
    };

    return (
        <ModalContainer style={{ height: '230px' }}>
            {/* <form onSubmit={handleSubmit}> */}
            <ModalTitle>
                <h3>Добавление узла</h3>
            </ModalTitle>

            <ModalContent style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
                <Input
                    type="text"
                    placeholderText='Введите адрес узла...'
                    id="newIp"
                    value={ipAddress}
                    onChange={(id, value) => setIpAddress(value)}
                />
                {error && (
                    <p style={{ color: 'red', marginTop: '5px' }}>
                        Некорректный адрес узла
                    </p>
                )}
            </ModalContent>

            <ButtonContainer>
                <MainButton type="button" size="small" title="Отмена" onClick={onClose} />
                <MainButton type="submit" size="small" title="Сохранить" onClick={handleSubmit} />
            </ButtonContainer>
            {/* </form> */}
        </ModalContainer>
    )
}