import { createSignal, type Component, type JSXElement } from "solid-js";
import { ISettingsModalViewProps } from "./types";
import SettingsProfilePage from "./pages/SettingsProfilePage/SettingsProfilePage";
import SettingsCommunitiesPage from "./pages/SettingsCommunitiesPage/SettingsCommunitiesPage";
import SettingsSessionPage from "./pages/SettingsSessionsPage/SettingsSessionsPage";
import { SettingsItem } from "../../components/SettingsItem";
import { Dynamic } from "solid-js/web";

const SettingsModalView: Component<ISettingsModalViewProps> = (
    props: ISettingsModalViewProps,
) => {
    const [getSelectedPage, setSelectedPage] = createSignal<string | undefined>(
        undefined,
    );

    const pages = new Map<string, Component>([
        ["Profile", SettingsProfilePage],
        ["Sessions", SettingsSessionPage],
        ["Communities", SettingsCommunitiesPage],
    ]);

    const getCurrentPage = (): JSXElement => {
        const selectedPage = getSelectedPage();

        if (selectedPage) {
            return <Dynamic component={pages.get(selectedPage)} />;
        } else {
            return undefined;
        }
    };

    const mapPageButton = (page: [string, Component]): JSXElement => (
        <SettingsItem
            id={page[0]}
            text={page[0]}
            active={page[0] === getSelectedPage()}
            onClick={setSelectedPage}
        />
    );

    return (
        <div>
            <dialog
                ref={props.dialogRef}
                class="modal outline-none bg-[#00000050]"
            >
                <div class="modal-box w-10/12 max-w-5xl h-11/12 2xl:h-9/12 bg-stone-950 rounded-3xl">
                    <h3 class="text-lg font-bold text-center">Settings</h3>
                    <div class="divider"></div>
                    <div class="flex flex-col lg:flex-row gap-4 px-4 items-center lg:items-stretch">
                        <div class="flex flex-col gap-2">
                            <h3 class="text-lg font-bold text-center mb-4">
                                Categories
                            </h3>
                            {[...pages].map(mapPageButton)}
                        </div>
                        <div class="divider divider-vertical lg:divider-horizontal"></div>
                        {getCurrentPage()}
                    </div>
                </div>
                <form
                    onClick={props.onClose}
                    method="dialog"
                    class="modal-backdrop"
                ></form>
            </dialog>
        </div>
    );
};

export default SettingsModalView;