"use client";

import { useState } from 'react';
import { Button, Dialog, Stack, Text } from '@photonix/ultimate';

export default function DialogBasicExample() {
    const [open, setOpen] = useState(false);

    return (
        <Stack gap="md">
            <Button variant="primary" onClick={() => setOpen(true)}>Open Dialog</Button>
            <Dialog
                open={open}
                onClose={() => setOpen(false)}
                title="Confirm changes"
                description="Review the details before applying this update."
                actions={[
                    { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
                    { label: 'Confirm', variant: 'primary', onClick: () => setOpen(false) },
                ]}
            >
                <Text variant="body-md" color="secondary">
                    This action will update the selected workspace settings.
                </Text>
            </Dialog>
        </Stack>
    );
}

"use client";

import { useState } from 'react';
import { Box, Button, ConfirmDialog } from '@photonix/ultimate';
import { Warning } from '@photonix/icons/illustrated';

export default function DialogConfirmExample() {
    const [open, setOpen] = useState(false);

    return (
        <Box>
            <Button variant="secondary" onClick={() => setOpen(true)}>Delete Selected Items</Button>
            <ConfirmDialog
                open={open}
                onClose={() => setOpen(false)}
                icon={<Warning />}
                title="Confirm Deletion"
                description="Are you sure you want to delete these 5 items? This action cannot be undone and these items will be permanently removed."
                actions={[
                    { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
                    { label: 'Delete Anyway', variant: 'primary', onClick: () => setOpen(false) },
                ]}
            />
        </Box>
    );
}

"use client";

import { useState } from 'react';
import { Button, ConfirmErrorDialog, ConfirmInfoDialog, ConfirmVerifyDialog, ConfirmWarningDialog, Stack } from '@photonix/ultimate';

export default function DialogSpecializedExample() {
    const [verifyOpen, setVerifyOpen] = useState(false);
    const [warningOpen, setWarningOpen] = useState(false);
    const [infoOpen, setInfoOpen] = useState(false);
    const [errorOpen, setErrorOpen] = useState(false);

    return (
        <Stack gap="md" wrap={true}>
            <Button variant="secondary" onClick={() => setVerifyOpen(true)}>Verify</Button>
            <Button variant="secondary" onClick={() => setWarningOpen(true)}>Warning</Button>
            <Button variant="secondary" onClick={() => setInfoOpen(true)}>Info</Button>
            <Button variant="secondary" onClick={() => setErrorOpen(true)}>Error</Button>

            <ConfirmVerifyDialog
                open={verifyOpen}
                onClose={() => setVerifyOpen(false)}
                title="Account Verified"
                description="Your account has been successfully verified."
                actions={[{ label: 'Done', variant: 'primary', onClick: () => setVerifyOpen(false) }]}
            />
            <ConfirmWarningDialog
                open={warningOpen}
                onClose={() => setWarningOpen(false)}
                title="Are you sure?"
                description="This action cannot be undone."
                actions={[
                    { label: 'Cancel', variant: 'secondary', onClick: () => setWarningOpen(false) },
                    { label: 'Delete', variant: 'primary', onClick: () => setWarningOpen(false) }
                ]}
            />
            <ConfirmInfoDialog
                open={infoOpen}
                onClose={() => setInfoOpen(false)}
                title="New Version Available"
                description="A new update is ready to install."
                actions={[{ label: 'Got it', variant: 'primary', onClick: () => setInfoOpen(false) }]}
            />
            <ConfirmErrorDialog
                open={errorOpen}
                onClose={() => setErrorOpen(false)}
                title="Connection Error"
                description="Failed to connect to the server."
                actions={[{ label: 'Retry', variant: 'primary', onClick: () => setErrorOpen(false) }]}
            />
        </Stack>
    );
}

"use client";

import { useState } from 'react';
import { Button, Dialog, TextField, VStack } from '@photonix/ultimate';

export default function DialogFormExample() {
    const [open, setOpen] = useState(false);

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        alert(`User ${formData.get('username')} added!`);
        setOpen(false);
    };

    return (
        <>
            <Button onClick={() => setOpen(true)}>Open Form Dialog</Button>
            <Dialog
                open={open}
                onClose={() => setOpen(false)}
                title="Add User"
                description="Enter user details below. Required fields are marked with *."
                actions={[
                    { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
                    {
                        label: 'Create Account',
                        type: 'submit',
                        form: 'user-form',
                    },
                ]}
            >
                <form id="user-form" onSubmit={handleSubmit} style={{ padding: 'var(--space-md) 0' }}>
                    <VStack gap="md">
                        <TextField
                            name="username"
                            label="Username"
                            placeholder="e.g. hoangthuan"
                            required
                            autoFocus
                        />
                        <TextField
                            name="email"
                            label="Email Address"
                            type="email"
                            placeholder="[email protected]"
                            required
                        />
                    </VStack>
                </form>
            </Dialog>
        </>
    );
}

"use client";

import { useState } from 'react';
import { Box, Button, Dialog, SlotPlaceholder } from '@photonix/ultimate';

export default function DialogCheckboxExample() {
    const [open, setOpen] = useState(false);
    const [agreed, setAgreed] = useState(false);

    return (
        <Box>
            <Button variant="secondary" onClick={() => setOpen(true)}>Open Checkbox Dialog</Button>
            <Dialog
                open={open}
                onClose={() => setOpen(false)}
                title="Terms of Service"
                footerLayout="withCheckbox"
                checkboxProps={{
                    label: "I agree to the terms",
                    checked: agreed,
                    onChange: setAgreed
                }}
                actions={[
                    { label: 'Continue', disabled: !agreed, onClick: () => setOpen(false) }
                ]}
            >
                <SlotPlaceholder title="Dialog Content" description="Confirm this action" minHeight={100} />
            </Dialog>
        </Box>
    );
}

"use client";

import { useState } from 'react';
import { Box, Button, Dialog, SlotPlaceholder } from '@photonix/ultimate';

export default function DialogLayoutExample() {
    const [open, setOpen] = useState(false);

    return (
        <Box>
            <Button variant="secondary" onClick={() => setOpen(true)}>Open Large Dialog</Button>
            <Dialog
                open={open}
                onClose={() => setOpen(false)}
                size="large"
                headerAlign="left"
                title="Large Dialog"
                actions={[{ label: 'Close', onClick: () => setOpen(false) }]}
            >
                <SlotPlaceholder title="Dialog Content" description="Confirm this action" minHeight={100} />
            </Dialog>
        </Box>
    );
}