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

#[component]
pub fn SwitchExample() -> impl IntoView {
    view! { <Switch checked=true>"Airplane Mode"</Switch> }
}

use leptos::prelude::*;
use singlestage::{Button, CheckboxGroup, Switch};

#[component]
pub fn SwitchGroupExample() -> impl IntoView {
    let value = RwSignal::new(vec![
        "recents".to_string(),
        "home".to_string(),
        "applications".to_string(),
    ]);

    view! {
        <form class="form flex flex-col gap-4">
            <p>"Value: "{move || format!("{:#?}", value.get())}</p>

            <CheckboxGroup value>
                <legend>
                    "Sidebar"
                    <p class="text-(--muted-foreground) text-sm">
                        "Select the items you want to display in the sidebar."
                    </p>
                </legend>

                <Switch value="recents">"Recents"</Switch>
                <Switch value="home">"Home"</Switch>
                <Switch value="applications">"Applications"</Switch>
                <Switch value="desktop">"Desktop"</Switch>
                <Switch value="download">"Download"</Switch>
                <Switch value="documents">"Documents"</Switch>
            </CheckboxGroup>

            <Button class="w-fit">"Submit"</Button>
        </form>
    }
}

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

#[component]
pub fn SwitchDescriptionExample() -> impl IntoView {
    view! {
        <Field orientation="horizontal" class="max-w-sm">
            <FieldContent>
                <FieldLabel label_for="switch-focus-mode">"Share across devices"</FieldLabel>
                <FieldDescription>
                    "Focus is shared across devices, and turns off when you leave the app."
                </FieldDescription>
            </FieldContent>
            <Switch id="switch-focus-mode" />
        </Field>
    }
}

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

#[component]
pub fn SwitchChoiceCardExample() -> impl IntoView {
    view! {
        <FieldGroup class="w-full max-w-sm">
            <FieldLabel label_for="switch-share">
                <Field orientation="horizontal">
                    <FieldContent>
                        <FieldTitle>"Share across devices"</FieldTitle>
                        <FieldDescription>
                            "Focus is shared across devices, and turns off when you leave the
                            app."
                        </FieldDescription>
                    </FieldContent>
                    <Switch id="switch-share" />
                </Field>
            </FieldLabel>
            <FieldLabel label_for="switch-notifications">
                <Field orientation="horizontal">
                    <FieldContent>
                        <FieldTitle>"Enable notifications"</FieldTitle>
                        <FieldDescription>
                            "Receive notifications when focus mode is enabled or disabled."
                        </FieldDescription>
                    </FieldContent>
                    <Switch id="switch-notifications" checked=true />
                </Field>
            </FieldLabel>
        </FieldGroup>
    }
}

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

#[component]
pub fn SwitchDisabledExample() -> impl IntoView {
    view! {
        <Field orientation="horizontal" disabled=true class="w-fit">
            <Switch id="switch-disabled-unchecked" />
            <FieldLabel label_for="switch-disabled-unchecked">"Disabled"</FieldLabel>
        </Field>
    }
}

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

#[component]
pub fn SwitchInvalidExample() -> impl IntoView {
    view! {
        <Field orientation="horizontal" class="max-w-sm" invalid=true>
            <FieldContent>
                <FieldLabel label_for="switch-terms">"Accept terms and conditions"</FieldLabel>
                <FieldDescription>
                    "You must accept the terms and conditions to continue."
                </FieldDescription>
            </FieldContent>
            <Switch id="switch-terms" />
        </Field>
    }
}

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

#[component]
pub fn SwitchSizeExample() -> impl IntoView {
    view! {
        <FieldGroup class="w-full max-w-[10rem]">
            <Field orientation="horizontal">
                <Switch id="switch-size-sm" size="sm" />
                <FieldLabel label_for="switch-size-sm">"Small"</FieldLabel>
            </Field>
            <Field orientation="horizontal">
                <Switch id="switch-size-default" size="default" />
                <FieldLabel label_for="switch-size-default">"Default"</FieldLabel>
            </Field>
        </FieldGroup>
    }
}