// 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 {useIpStore} from "../../../store";

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



export const NoteWifi = ({ address, onClose, currentNote, type}: Props) => {
    const [note, setNote] = useState(currentNote || '');
    const { ipAddress } = useIpStore();
    const { wifiNetworks, setWifiNetworks } = useNetworkStore();

    const handleSave = async () => {
        try {
            if (!currentNote && note.trim() !== '') {
                await NetworkService.addNote(ipAddress, address, note, type);
            }else if (currentNote && note.trim() !== '' && note !== currentNote) {
                await NetworkService.editNote(ipAddress, address, note, type);
            }else if (currentNote && note.trim() === '') {
                await NetworkService.deleteNote(ipAddress, address, type);
            }else {
                onClose();
                return;
            }
            const updatedNetworks = wifiNetworks.map(network =>
                network.ssid === address
                    ? { ...network, note: note.trim() }
                    : { ...network }
            );
            setWifiNetworks(updatedNetworks);
            onClose();

        } catch (error) {
            console.error('Error saving note:', error);
        }
    };


    return (
        <ModalContainer style={{ height: '220px' }}>
            <ModalTitle>
                <h3>{currentNote ? 'Редактирование заметки' : 'Добавление заметки'}</h3>
            </ModalTitle>

            <ModalContent style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <Input
                    type="text"
                    placeholderText='Введите заметку...'
                    value={note}
                    id='deviceNote'
                    onChange={(value) => setNote(value)}
                />
            </ModalContent>

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