import { ModalContainer, ModalTitle, ModalContent, ModalText } from "./modalwindows/style"
import Input from "./UI/inputs/input"
import { MainButton } from "./UI/buttons/mainButton"
import styled from "styled-components"
import { useEffect, useState } from "react"
import { useIpStore } from "../store"
import { NetworkService } from "../api/request"
import { IconComponent } from "../const/buttons/icons"
import { buttonNames } from "../const/buttons/names"
import ThemeButton from "./UI/buttons/toggletheme"
import About from "./workSpace/modules/appModules/about"

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: ${(props) => props.theme.background};
`

const Container = styled.form`
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    background: ${(props) => props.theme.primary};
    padding: 25px;
    border-radius: 18px;
    width: 350px;
`

const Title = styled.div`
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    text-align: center;
    font-size: 20px;
`

const Content = styled.div`
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
`

const ButtonContainer = styled.div`
    width: 100%;
    display: flex;
    justify-content: center;
`

const Menu = styled.div`
    display: flex;
    align-items: center;
`

const Button = styled.div`
    width: 100%;
    cursor: pointer;
`

const IconContainer = styled.div`
    padding: 10px;
    color: ${props => props.theme.text};
`

export const CreateUser = () => {

    const { ipAddress, setIpAddress } = useIpStore();
    const [repeatPassword, setRepeatPassword] = useState('');
    const [passwordsMatch, setPasswordsMatch] = useState(true);
    const [about, setAbout] = useState(false)

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

    const handleChange = (id: string, value: string) => {
        if (id === 'repeatPassword') {
            setRepeatPassword(value);
            setPasswordsMatch(user.password === value);
        } else {
            setUser(prevData => ({
                ...prevData,
                [id]: value
            }));
            if (id === 'password') {
                setPasswordsMatch(value === repeatPassword);
            }
        }
    }

    const handleSave = async (user: object) => {
        try {
            const result = await NetworkService.createUser(ipAddress, user);
            if (result.status === 200) { window.location.reload() }
        } catch (err) {
            console.error('Error:', err);
        }
    }

    const handleSubmit = () => {
        if (passwordsMatch) {
            handleSave(user);
        }
    };

    const back = ()=>{
        setIpAddress('localhost')
    }

    const toAbout = ()=>{
        setAbout(true)
    }
    return (

        <>
            {!about ? (
                <Wrapper>

                <Container onSubmit={handleSubmit}>
                    <Title>
                        <IconComponent name={buttonNames[3]} width="52" height="52"></IconComponent>
                        <h3>Настройка оператора узла</h3>
                        {ipAddress != 'localhost' &&
                            <p>{ipAddress}</p>
                        }
    
                    </Title>
    
                    <Content>
    
                        <div>
                            <p>Перед началом работы необходимо создать пароль оператора приложения</p>
                        </div>
    
                        <div>
                            <Input
                                type="password"
                                placeholderText='Введите пароль...'
                                id="password"
                                value={user.password}
                                onChange={(value) => handleChange('password', value)}
                            />
    
                            <Input
                                type="password"
                                placeholderText='Повторите пароль...'
                                id="repeatPassword"
                                value={repeatPassword}
                                onChange={(value) => handleChange('repeatPassword', value)}
                                style={{ marginTop: '10px' }}
                            />
                            {!passwordsMatch && (
                                <p style={{ color: 'red', marginTop: '5px' }}>
                                    Пароли не совпадают!
                                </p>
                            )}
                        </div>
    
                    </Content>
    
                    <ButtonContainer>
                        <MainButton style={{ width: '100%' }} title="Отправить" type="submit" />
                    </ButtonContainer>
    
    
                </Container>
    
    
                <Menu>
                    {ipAddress != 'localhost' &&
                        <MainButton title="Назад"  onClick={back} style={{marginRight: '10px'}}/>
                    }
                    <ThemeButton />
                    <Button>
                        <IconContainer>
                            <IconComponent name={buttonNames[4]} width="30" height="30" onClick={toAbout}/>
                        </IconContainer>
                    </Button>
                    </Menu>
            </Wrapper>
            ): (
                <About from="reg" onBack={() => setAbout(false)} />
            )}
        </>
        
    )
}