import {AuthorRoleMenuDetailTable} from "../component/AuthorRoleMenuDetailTable.tsx";
import {useAuthorRoleMenuPopupPage} from "../hook/page/useAuthorRoleMenuPopupPage.ts";

export const AuthorRoleMenuPopupPage = () => {
    const {
        authorCode,
        items,
        isLoading,
        error,
        isChecked,
        onCheck,
        onSave
    } = useAuthorRoleMenuPopupPage();

    if (isLoading) {
        return <p>Loading...</p>;
    }

    if (error) {
        return <p>{error.message}</p>;
    }

    return (
        <div>
            <div className={"popup_window popup"}>
                <h2 className={"title"}>메뉴관리</h2>

                <div className={"popup_content"}>
                    <div className="content_title mt0">
                        <h3 className="title">조건정보 영역</h3>
                    </div>
                    <ul className="search_area box">
                        <li className="search_item">
                            <strong className="search_title">권한코드</strong>
                            <div className="form_wrap">
                                <input id="authorCode" className="input" name="authorCode" type="text" value={authorCode} readOnly={true} />
                            </div>
                        </li>
                    </ul>
                    <AuthorRoleMenuDetailTable
                        items={items}
                        isChecked={isChecked}
                        onCheck={onCheck}
                    />
                </div>
                <div className={"btn_wrap center mt20"}>
                    <button onClick={onSave} className={"btn fill primary large w20per"}>설정</button>
                    <button onClick={() => {window.close()}} className={"btn fill gray large w20per"}>닫기</button>
                </div>
            </div>
        </div>
    );
}