// 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 {useIpStore} from "../../../store";
import {NetworkService} from "../../../api/request";
import useNetworkStore from "../../../store/useDeviceStore";

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



export const NoteDevice = ({ mac, onClose, currentNote}: Props) => {
    const [note, setNote] = useState(currentNote || '');
    const { ipAddress } = useIpStore();
    const { devices, setDevices } = useNetworkStore();

    const handleSave = async () => {
        try {
            if (!currentNote && note.trim() !== '') {
                await NetworkService.addNote(ipAddress, mac, note);
            }else if (currentNote && note.trim() !== '' && note !== currentNote) {
                await NetworkService.editNote(ipAddress, mac, note);
            }else if (currentNote && note.trim() === '') {
                await NetworkService.deleteNote(ipAddress, mac);
            }else {
                onClose();
                return;
            }

            const updatedDevices = devices.map(device =>
                device.mac === mac
                    ? { ...device, note: note.trim() }
                    : device
            );
            setDevices(updatedDevices);
            onClose();

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

    return (
        <ModalContainer style={{ height: '250px' }}>
            <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>
    );
};