// components/modalContainers/NoteDevice.tsx
import { ModalContainer, ModalTitle, ModalContent, ButtonContainer } from "../style";
import { MainButton } from "../../UI/buttons/mainButton";
import Input from "../../UI/inputs/input";
import { useState } from "react";
import {NetworkService} from "../../../api/request";
import useNetworkStore from "../../../store/useDeviceStore";
import RouterLoader from "../../UI/routerLoader";
import {useTheme} from "styled-components";
import {useIpStore} from "../../../store";

interface Props {
    address: string;
    onClose: () => void;
}



export const ConnectNetwork = ({address, onClose}: Props) => {
    const [password, setPassword] = useState('');
    const theme = useTheme();
    const { ipAddress } = useIpStore();
    const [error, setError] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    const handleSave = async () => {
        try {
            setIsLoading(true);
            setError('')
            const res = await NetworkService.connectNetwork(ipAddress, password, address);
            if(res.status === 200) {
                onClose()
            }else{
                setError(res.data.detail)
            }
        } catch (error) {
            console.error('Error connection:', error);
            setError('Ошибка подключения к сети')
        }finally {
            setIsLoading(false);
        }
    };


    return (
        <ModalContainer style={{ height: '230px' }}>
            <ModalTitle>
                <h3>Подключение к сети</h3>
            </ModalTitle>

            <ModalContent style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <Input
                    type="password"
                    placeholderText='Введите пароль...'
                    value={password}
                    id='deviceNote'
                    onChange={(value) => setPassword(value)}
                />
                <p style={{ color: 'red', marginLeft: '10px', fontSize: '14px', textAlign: 'right' }}>
                    {error}
                </p>
            </ModalContent>

            <ButtonContainer>
                <MainButton
                    type="button"
                    size="small"
                    title="Отмена"
                    onClick={onClose}
                />
                <MainButton
                    type="button"
                    size="small"
                    color={theme.successColor}
                    hoverColor={theme.successColor}
                    title='Подключиться'
                    onClick={handleSave}
                />
            </ButtonContainer>

            {isLoading && <RouterLoader loaderText='Попытка подключения к сети'/>}
        </ModalContainer>
    );
};