import { useEffect, useState } from "react"
import { ModalContainer, ModalTitle, ModalContent, ModalText, ButtonContainer } from "../style"
import Input from "../../UI/inputs/input"
import { MainButton } from "../../UI/buttons/mainButton"
import { NetworkService } from "../../../api/request"
import { useIpStore } from "../../../store"
import { useAdminStore } from "../../../store/adminStore"
import { useCheckAdmin } from "../../../utils/checkAdmin"

import { buttonNames } from "../../../const/buttons/names"
import { IconComponent } from "../../../const/buttons/icons"

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

export const RightsConfirm = ({ onClose }: Props) => {

    const { ipAddress } = useIpStore();
    const { isAdmin, setAdmin } = useAdminStore()
    const checkAdmin = useCheckAdmin();
    const [error, setError] = useState(false)
    const [success, setSuccess] = useState({
        message: '',
        status: false
    })

    const [user, setUser] = useState({
        username: 'operator',
        password: ""
    })

    const handleChange = (id: string, value: string) => {
        setUser(prevData => ({
            ...prevData,
            [id]: value
        }));
    }

    const login = async (user: object) => {
        try {
            const response = await NetworkService.login(ipAddress, user);
            if(response.status === 200){
                await checkAdmin();
                setError(false)
                setSuccess(prevData => ({
                    ...prevData,
                    message: 'Успешный вход',
                    status: true
                }));
                await new Promise(resolve => setTimeout(resolve, 3000));
                onClose();
            }else{
                setError(true)
            }
        } catch (err) {
            console.error('Error:', err);
        }
    }

    const logout = async () => {
            await NetworkService.logout(ipAddress);
            await checkAdmin();
            setSuccess(prevData => ({
                ...prevData,
                message: 'Успешный выход',
                status: true
            }));
            await new Promise(resolve => setTimeout(resolve, 3000));
            onClose();
    }

    return (
        <ModalContainer style={!isAdmin ? {height: '250px'} : {height: 'unset'}}>
            {!success.status ? (
                !isAdmin ? (
                    <>
                        <ModalTitle>
                            <h3>Получение прав доступа</h3>
                        </ModalTitle>
    
                        <ModalContent style={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
    
                            <h3 style={{marginLeft: '5px', fontSize: '14px'}}>Включить административный доступ</h3>
                            <Input
                                type="password"
                                placeholderText='Введите пароль администратора...'
                                id="password"
                                value={user.password}
                                onChange={(value) => handleChange('password', value)}
                            />
    
                            {error && (
                                <p style={{ color: 'red', marginLeft: '10px', fontSize: '14px', textAlign: 'right' }}>
                                    Неверный пароль оператора
                                </p>
                            )}
    
                        </ModalContent>
    
                        <ButtonContainer>
                            <MainButton size="small" title="Отмена" onClick={onClose} />
                            <MainButton size="small" title="Отправить" onClick={() => login(user)} />
                        </ButtonContainer>
                    </>
                ) : (
                    <>
                        <ModalTitle>
                            <h3>Переключиться на ограниченный доступ</h3>
                        </ModalTitle>
    
                        <ModalContent>
                            <p>В данном режиме доступа ограничиваются полномочия администратора.</p>
                        </ModalContent>
    
                        <ButtonContainer>
                            <MainButton size="small" title="Отмена" onClick={onClose} />
                            <MainButton size="small" title="Ограничить доступ" onClick={logout} />
                        </ButtonContainer>
    
                    </>
                )
            ):(
                <ModalContainer style={{display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', marginTop: '15px'}}>
                    <IconComponent name={buttonNames[8]} width="50" height="50"/>
                    <h3>{success.message}</h3>
                    <p style={{fontSize: '12px'}}>Это окно можно закрыть, либо оно пропадёт само</p>
                    <MainButton size="small" title="Закрыть" onClick={onClose} style={{width: '30%'}}/>
                </ModalContainer>
            )}
            

        </ModalContainer>
    )
}