import {fetchMenuList} from "../../api/menuApi.ts";
import {useQuery} from "@tanstack/react-query";
import type {MenuItem, MenuItemResponse} from "../../type/menu.ts";

function toMenuItem(item: MenuItemResponse): MenuItem {
    return {
        no: String(item.menuNo ?? ''),
        name: item.menuNm ?? '',
        url: item.chkURL ?? '#',
        upperNo: String(item.upperMenuId ?? '0'),
    };
}

export const useMenuList = () => {
    const query = useQuery({
        queryKey: ['menuList'],
        queryFn: fetchMenuList,
        select: (data) => {
            const headMenuList =
                (data.head ?? [])
                    .map(toMenuItem)
                    .filter((item: MenuItem) => item.no && item.name);

            const menuList =
                (data.menu ?? [])
                    .map(toMenuItem)
                    .filter((item: MenuItem) => item.no && item.name);

            return {
                headMenuList,
                menuList,
            };
        },

        staleTime: 1000 * 60 * 10,
    });

    return {
        headMenuList: query.data?.headMenuList ?? [],
        menuList: query.data?.menuList ?? [],
        isLoading: query.isLoading,
        errorMessage: query.error instanceof Error ? query.error.message : null,
    };
};