import { ModalContainer, ModalTitle, ModalContent, ModalText, ButtonContainer } from "../style"
import { useModalContext } from "../../../store"
import { useIpStore } from "../../../store"
import { MainButton } from "../../UI/buttons/mainButton"
import {useState} from "react";
import {NetworkService} from "../../../api/request";
import RouterLoader from "../../UI/routerLoader";
import {useTheme} from "styled-components";

type Props={
    address: string,
    onClose: () => void
}

export const DisconnectConfirm = ({address, onClose}: Props)=>{
    const { ipAddress } = useIpStore();
    const theme = useTheme()
    const [isLoading, setIsLoading] = useState(false);

    const handleDisconnect = async () => {
        try {
            setIsLoading(true);
            const res = await NetworkService.disconnectNetwork(ipAddress, address);
            if(res.status === 200) {
                onClose()
            }
        } catch (error) {
            console.error('Error connection:', error);
        }finally {
            setIsLoading(false);
        }
    };

    return(
        <ModalContainer>
            <ModalTitle>
                <h3>Отключение от Wi-Fi сети</h3>
            </ModalTitle>
           
            <ModalContent>
                <ModalText>
                    <h3>Подтверждение отключения</h3>
                    <p>Вы собираетесь отключиться от сети "{address}". Все активные подключения будут прерваны.</p>
                </ModalText>
            </ModalContent>

            <ButtonContainer>
                <MainButton title="Отменить" onClick={onClose} size="small"/>
                <MainButton title="Отключиться" color={theme.errorColor} hoverColor={theme.errorColor} onClick={handleDisconnect} size="small"/>
            </ButtonContainer>
            {isLoading && <RouterLoader loaderText='Отключение от сети'/>}
        </ModalContainer>
    )
}