import { h } from "preact"
import { Dialog } from "@/comps/echo/dialog"
 
export const UncontrolledDemo = () => {
 
    return (
        <div class="echo-theme p-[24px]">
            <Dialog
                trigger={() => <button class="mb-2">Open plain Dialog</button>}
                title="Hello traveller!"
                description="Put anything you want here - even <Slider /> or <VirtualList />."
                footer={() => (
                    <button onClick={(/* e */) => console.log("dismissed!")}>
                        Got it
                    </button>
                )}
            >
                <div>{`(っ◕‿◕)っ`}</div>
            </Dialog>
        </div>
    )
}

import { h } from "preact"
import { useState } from "preact/hooks"
import { Dialog } from "@/comps/echo/dialog"
 
export const ControlledDemo = () => {
    const [open, setOpen] = useState(false)
 
    return (
        <div class="echo-theme p-[24px]">
            <Dialog
                open={open}
                onOpenChange={setOpen}
                trigger={() => (
                    <button onClick={() => setOpen(true)} class="mb-2">
                        Open plain Dialog
                    </button>
                )}
                title="Hello traveller!"
                description="Put anything you want here – even <Slider /> or <VirtualList />."
                footer={() => (
                    <button onClick={() => setOpen(false)}>
                        Got it
                    </button>
                )}
            >
                <div>{`=^..^=`}</div>
            </Dialog>
        </div>
    )
}

import { h } from "preact"
import { useState } from "preact/hooks"
import { ConfirmDialog } from "@/comps/echo/dialog"
 
export const ConfirmDemo = () => {
    const [showConfirm, setShowConfirm] = useState(false)
 
    return (
        <div class="echo-theme p-[24px]">
            <button class="mb-2" onClick={() => setShowConfirm(true)}>Confirm…</button>
            <ConfirmDialog
                open={showConfirm}
                onOpenChange={setShowConfirm}
                title="Delete Object?"
                description="This cannot be undone."
                onConfirm={() => console.log("DELETE!")}
                onCancel={() => console.log("phew… safe!")}
                confirmLabel="Yes, delete"
                cancelLabel="No, keep it"
            />
        </div>
    )
}

import { h } from "preact"
import { useState } from "preact/hooks"
import { PromptDialog } from "@/comps/echo/dialog"
 
export const PromptDemo = () => {
    const [showPrompt, setShowPrompt] = useState(false)
 
    return (
        <div class="echo-theme p-[24px]">
            <button class="mb-2" onClick={() => setShowPrompt(true)}>Prompt…</button>
            <PromptDialog
                open={showPrompt}
                onOpenChange={setShowPrompt}
                title="Give it a name"
                defaultValue="Untitled"
                onSubmit={val => console.log("user typed:", val)}
            />
        </div>
    )
}

import { h } from "preact"
import { useState } from "preact/hooks"
import { InfoDialog } from "@/comps/echo/dialog"
 
export const InfoDemo = () => {
    const [showInfo, setShowInfo] = useState(false)
 
    return (
        <div class="echo-theme p-[24px]">
            <button onClick={() => setShowInfo(true)}>Info…</button>
            <InfoDialog
                open={showInfo}
                onOpenChange={setShowInfo}
                title="Heads-up"
                description="All systems nominal."
                onAction={() => console.log("closed info")}
            />
        </div>
    )
}