Sheet

use leptos::html::Div;
use leptos::prelude::*;
use leptos_use::on_click_outside;

use crate::components::hooks::use_lock_body_scroll::use_lock_body_scroll;
use crate::components::ui::sheet::{SheetCancel, SheetContent, SheetDescription, SheetTitle, SheetTrigger, SheetVariant};

#[component]
pub fn DemoSheet() -> impl IntoView {
    let is_open = RwSignal::new(false);
    let scroll_locked = use_lock_body_scroll(false);
    let _sheet_ref = NodeRef::<Div>::new();

    Effect::new(move |_| {
        scroll_locked.set(is_open.get());
    });

    let toggle_sheet = move |_| {
        is_open.update(|v| {
            *v = !*v;
        });
    };

    Effect::new(move |_| {
        if is_open.get() {
            let handle_click_outside = move || {
                is_open.set(false);
            };
            let _ = on_click_outside(_sheet_ref.get(), move |_| handle_click_outside());
        }
    });

    view! {
        <>
            <SheetTrigger on:click=toggle_sheet>"Open Sheet"</SheetTrigger>

            <div node_ref=_sheet_ref>
                <SheetContent is_open=is_open class="w-[400px]">
                    <SheetTitle>{"Sheet Title"}</SheetTitle>
                    <SheetDescription>{"This is the content inside the sheet."}</SheetDescription>

                    <SheetCancel on:click=toggle_sheet variant=SheetVariant::Destructive>
                        {"Cancel"}
                    </SheetCancel>
                </SheetContent>
            </div>
        </>
    }
}

use leptos::html::Div;
use leptos::prelude::*;
use leptos_use::on_click_outside;

use crate::components::hooks::use_lock_body_scroll::use_lock_body_scroll;
use crate::components::ui::sheet::{
    SheetCancel, SheetContent, SheetDescription, SheetDirection, SheetTitle, SheetTrigger, SheetVariant,
};

// TODO later. Refactor this to use a single component.

#[component]
pub fn DemoSheetDirections() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-4 items-center">
            <DemoSheetTop />
            <div class="flex gap-4">
                <DemoSheetLeft />
                <DemoSheetRight />
            </div>
            <DemoSheetBottom />
        </div>
    }
}

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                     ✨ FUNCTIONS ✨                        */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

#[component]
pub fn DemoSheetTop() -> impl IntoView {
    let is_open = RwSignal::new(false);
    let scroll_locked = use_lock_body_scroll(false);
    let _sheet_ref = NodeRef::<Div>::new();

    Effect::new(move |_| {
        scroll_locked.set(is_open.get());
    });

    let toggle_sheet = move |_| {
        is_open.update(|v| {
            *v = !*v;
        });
    };

    Effect::new(move |_| {
        if is_open.get() {
            let handle_click_outside = move || {
                is_open.set(false);
            };
            let _ = on_click_outside(_sheet_ref.get(), move |_| handle_click_outside());
        }
    });

    view! {
        <>
            <SheetTrigger on:click=toggle_sheet>"Top"</SheetTrigger>

            <div node_ref=_sheet_ref>
                <SheetContent direction=SheetDirection::Top is_open=is_open class="w-full h-[200px]">
                    <SheetTitle>{"Sheet Title"}</SheetTitle>
                    <SheetDescription>{"This is the content inside the sheet."}</SheetDescription>

                    <SheetCancel on:click=toggle_sheet variant=SheetVariant::Destructive>
                        {"Cancel"}
                    </SheetCancel>
                </SheetContent>
            </div>
        </>
    }
}

#[component]
pub fn DemoSheetLeft() -> impl IntoView {
    let is_open = RwSignal::new(false);
    let scroll_locked = use_lock_body_scroll(false);
    let _sheet_ref = NodeRef::<Div>::new();

    Effect::new(move |_| {
        scroll_locked.set(is_open.get());
    });

    let toggle_sheet = move |_| {
        is_open.update(|v| {
            *v = !*v;
        });
    };

    Effect::new(move |_| {
        if is_open.get() {
            let handle_click_outside = move || {
                is_open.set(false);
            };
            let _ = on_click_outside(_sheet_ref.get(), move |_| handle_click_outside());
        }
    });

    view! {
        <>
            <SheetTrigger on:click=toggle_sheet>"Left"</SheetTrigger>

            <div node_ref=_sheet_ref>
                <SheetContent direction=SheetDirection::Left is_open=is_open class="w-[400px]">
                    <SheetTitle>{"Sheet Title"}</SheetTitle>
                    <SheetDescription>{"This is the content inside the sheet."}</SheetDescription>

                    <SheetCancel on:click=toggle_sheet variant=SheetVariant::Destructive>
                        {"Cancel"}
                    </SheetCancel>
                </SheetContent>
            </div>
        </>
    }
}

#[component]
pub fn DemoSheetRight() -> impl IntoView {
    let is_open = RwSignal::new(false);
    let scroll_locked = use_lock_body_scroll(false);
    let _sheet_ref = NodeRef::<Div>::new();

    Effect::new(move |_| {
        scroll_locked.set(is_open.get());
    });

    let toggle_sheet = move |_| {
        is_open.update(|v| {
            *v = !*v;
        });
    };

    Effect::new(move |_| {
        if is_open.get() {
            let handle_click_outside = move || {
                is_open.set(false);
            };
            let _ = on_click_outside(_sheet_ref.get(), move |_| handle_click_outside());
        }
    });

    view! {
        <>
            <SheetTrigger on:click=toggle_sheet>"Right"</SheetTrigger>

            <div node_ref=_sheet_ref>
                <SheetContent is_open=is_open class="w-[400px]">
                    <SheetTitle>{"Sheet Title"}</SheetTitle>
                    <SheetDescription>{"This is the content inside the sheet."}</SheetDescription>

                    <SheetCancel on:click=toggle_sheet variant=SheetVariant::Destructive>
                        {"Cancel"}
                    </SheetCancel>
                </SheetContent>
            </div>
        </>
    }
}

#[component]
pub fn DemoSheetBottom() -> impl IntoView {
    let is_open = RwSignal::new(false);
    let scroll_locked = use_lock_body_scroll(false);
    let _sheet_ref = NodeRef::<Div>::new();

    Effect::new(move |_| {
        scroll_locked.set(is_open.get());
    });

    let toggle_sheet = move |_| {
        is_open.update(|v| {
            *v = !*v;
        });
    };

    Effect::new(move |_| {
        if is_open.get() {
            let handle_click_outside = move || {
                is_open.set(false);
            };
            let _ = on_click_outside(_sheet_ref.get(), move |_| handle_click_outside());
        }
    });

    view! {
        <>
            <SheetTrigger on:click=toggle_sheet>"Bottom"</SheetTrigger>

            <div node_ref=_sheet_ref>
                <SheetContent direction=SheetDirection::Bottom is_open=is_open class="w-full">
                    <SheetTitle>{"Sheet Title"}</SheetTitle>
                    <SheetDescription>{"This is the content inside the sheet."}</SheetDescription>

                    <SheetCancel on:click=toggle_sheet variant=SheetVariant::Destructive>
                        {"Cancel"}
                    </SheetCancel>
                </SheetContent>
            </div>
        </>
    }
}

use leptos::prelude::*;
use leptos_ui::clx;

#[component]
pub fn DemoSheetExperimental() -> impl IntoView {
    clx! {SheetTrigger, button, "bg-none border-none cursor-pointer text-2xl flex items-center"}

    // TODO. `anchor` attribute is still an experimental feature:
    // TODO. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/anchor
    const TARGET_ID: &str = "sheet__target";
    const ANCHOR_ID: &str = "menu__anchor";

    view! {
        <style>
            {"nav.my__sheet[popover] {
            transform: translateX(-100%);
            }
            
            nav.my__sheet:popover-open {
            transform: translateX(0);
            }
            "}
        </style>

        <div>
            <button
                class="flex items-center text-2xl bg-none border-none cursor-pointer"
                id=ANCHOR_ID
                popovertarget=TARGET_ID
                popovertargetaction="toggle"
                aria-label="Open settings my_sheet"
            >
                "☰"
            </button>

            <nav
                id="sheet__target"
                // id=TARGET_ID
                anchor="menu__anchor"
                // anchor=ANCHOR_ID
                class="flex fixed inset-y-0 left-0 z-50 flex-col justify-between p-4 border-r transition-transform duration-300 ease-in-out my__sheet w-[320px] h-[100dvh] bg-neutral-200 border-r-gray-200"
                popover
            >

                <div class="relative">
                    <button
                        class="absolute top-2 right-2 p-2 rounded-lg border cursor-pointer text-neutral-500 border-neutral-300"
                        popovertarget="sheet__target"
                        // popovertarget=TARGET_ID.
                        popovertargetaction="hide"
                    >
                        "X"
                    </button>

                    <h2>Workspace Settings</h2>
                    <ul>
                        <li>
                            <a href="#">Team</a>
                        </li>
                        <li>
                            <a href="#">Billing</a>
                        </li>
                        <li>
                            <a href="#">Integrations</a>
                        </li>
                        <li>
                            <a href="#">Keyboard Shortcuts</a>
                        </li>
                    </ul>
                </div>
                <footer class="text-right">
                    <button
                        class="py-2 px-4 text-white rounded-md bg-sky-500"
                        popovertarget="sheet__target"
                        // popovertarget=TARGET_ID.
                        popovertargetaction="hide"
                    >
                        Close
                    </button>
                </footer>
            </nav>

        </div>
    }
}