use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn DialogExample() -> impl IntoView {
    view! {
        <Dialog class="sm:max-w-sm">
            <DialogTrigger>
                <Button variant="outline">"Open Dialog"</Button>
            </DialogTrigger>
            <DialogContent>
                <form>
                    <DialogHeader>
                        <DialogTitle>"Edit profile"</DialogTitle>
                        <DialogDescription>
                            "Make changes to your profile here. Click save when you're
                            done."
                        </DialogDescription>
                    </DialogHeader>
                    <FieldGroup>
                        <Field>
                            <Input name="name" value="Pedro Duarte">
                                "Name"
                            </Input>
                        </Field>
                        <Field>
                            <Input name="username" value="@peduarte">
                                "Username"
                            </Input>
                        </Field>
                    </FieldGroup>
                    <DialogFooter>
                        <DialogClose>
                            <Button>"Cancel"</Button>
                        </DialogClose>
                        <Button button_type="submit">"Save changes"</Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn DialogCustomCloseButtonExample() -> impl IntoView {
    view! {
        <Dialog class="sm:max-w-md">
            <DialogTrigger>
                <Button variant="outline">"Share"</Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>"Share link"</DialogTitle>
                    <DialogDescription>
                        "Anyone who has this link will be able to view this."
                    </DialogDescription>
                </DialogHeader>
                <div class="flex items-center gap-2">
                    <div class="grid flex-1 gap-2">
                        <Label label_for="link" class="sr-only">
                            "Link"
                        </Label>
                        <Input
                            id="link"
                            value="https://singlestage.doordesk.net/install"
                            readonly=true
                        />
                    </div>
                </div>
                <DialogFooter class="sm:justify-start">
                    <DialogClose>
                        <Button button_type="button">"Close"</Button>
                    </DialogClose>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn DialogNoCloseButtonExample() -> impl IntoView {
    view! {
        <Dialog>
            <DialogTrigger>
                <Button variant="outline">"No Close Button"</Button>
            </DialogTrigger>
            <DialogContent close_button=false>
                <DialogHeader>
                    <DialogTitle>"No Close Button"</DialogTitle>
                    <DialogDescription>
                        "This dialog doesn't have a close button in the top-right
                        corner."
                    </DialogDescription>
                </DialogHeader>
            </DialogContent>
        </Dialog>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn DialogStickyFooterExample() -> impl IntoView {
    view! {
        <Dialog>
            <DialogTrigger>
                <Button variant="outline">"Sticky Footer"</Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>"Sticky Footer"</DialogTitle>
                    <DialogDescription>
                        "This dialog has a sticky footer that stays visible while the content
                        scrolls."
                    </DialogDescription>
                </DialogHeader>
                <div class="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
                    <For each=move || 0..10 key=|i| i.to_string() let(_)>
                        <p class="mb-4 leading-normal"></p>
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                        enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                        sunt in culpa qui officia deserunt mollit anim id est laborum."
                    </For>
                </div>
                <DialogFooter>
                    <DialogClose>
                        <Button variant="outline">"Close"</Button>
                    </DialogClose>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn DialogScrollableContentExample() -> impl IntoView {
    view! {
        <Dialog>
            <DialogTrigger>
                <Button variant="outline">"Scrollable Content"</Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>"Scrollable Content"</DialogTitle>
                    <DialogDescription>
                        "This is a dialog with scrollable content."
                    </DialogDescription>
                </DialogHeader>
                <div class="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
                    <For each=move || 0..10 key=|i| i.to_string() let(_)>
                        <p class="mb-4 leading-normal">
                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                            enim ad minim veniam, quis nostrud exercitation ullamco laboris
                            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                            reprehenderit in voluptate velit esse cillum dolore eu fugiat
                            nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                            sunt in culpa qui officia deserunt mollit anim id est laborum."
                        </p>
                    </For>
                </div>
            </DialogContent>
        </Dialog>
    }
}