device.box.viewmodel.ts

import { NetworkelementFlattenedManagedNetworkElement, NetworkElementServiceDeleteApiArg, useNetworkElementServiceDeleteMutation } from "@api/api";
import { useAppDispatch, useAppSelector } from "@hooks";
import { useCallback, useMemo, useState } from "react";
import { toast } from "react-toastify";
import { Device, setDevices, setSelectedDevice } from "../reducer/device.reducer";
import { fetchPluginsThunk } from "../routines/plugin.routine";

export const useDeviceBoxViewModel = () => {
    const dispatch = useAppDispatch();

    const [deleteNetworkElement] = useNetworkElementServiceDeleteMutation()
    const { devices, pnds, selected: selectedDevice } = useAppSelector(
        (state) => state.device
    );
    const [addModal, setAddModal] = useState(false);
    const [searchValue, setSearchValue] = useState(""); // Add search state

    const handleSearch = useCallback((value: string) => {
        setSearchValue(value);
    }, []);

    const handleItemClick = useCallback((device: Device) => {
        dispatch(setSelectedDevice({ device }));
    }, []);

    const openAddModal = useCallback(() => {
        dispatch(fetchPluginsThunk());
        setAddModal(true);
    }, []);

    const closeModal = useCallback(() => {
        setAddModal(false);
    }, []);

    const removeDevice = useCallback(async (device: NetworkelementFlattenedManagedNetworkElement) => {
        if (!device?.id) {
            toast.error("Error: Please reload the page and try it again")
            return
        }
        const pnd = pnds.find(pnd => pnd.id === device.pid)
        if (!pnd) {
            toast.error("Error: Please reload the page and try it again")
            return
        }

        const payload: NetworkElementServiceDeleteApiArg = {
            mneid: device.id,
            timestamp: new Date().getTime().toString(),
            pid: pnd.id
        }
        try {
            await deleteNetworkElement(payload).unwrap()
            const newDevices = devices.filter(_device => _device.id !== device.id)
            dispatch(setDevices(newDevices))
            toast.success("Device successfully deleted")
        } catch (error) {
            toast.error("Error: Delete was not successful. Please reload the page and try it again")
        }
    }, [])


    const filteredDevices = useMemo(() => {
        if (!searchValue) return devices;

        return devices.filter((device) => {
            const user = pnds.find((pnd) => pnd.id === device.pid);
            return (
                device.id?.toLowerCase().includes(searchValue.toLowerCase()) ||
                device.name?.toLowerCase().includes(searchValue.toLowerCase()) ||
                user?.name?.toLowerCase().includes(searchValue.toLowerCase())
            );
        });
    }, [devices, pnds, searchValue]);

    return {
        filteredDevices,
        handleItemClick,
        selectedDevice,
        pnds,
        addModal,
        openAddModal,
        closeModal,
        searchValue,
        handleSearch,
        removeDevice
    };
};