import Layout from '../../components/Layout'
import { ComponentsSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import { Code, Heading, Paragraph } from '@knkui/typography';
import SyntaxHighlighter from '../../components/SyntaxHighlighter';

export default function Dialog() {
    return (
        <Layout
            title="Dialog"
            showHero
            description="The Dialog component is used to show content on top of an overlay. It blocks any interaction with the page — until the overlay is clicked, or a close action is triggered."
            sidebar={ComponentsSidebar}
        >
            <Heading size={800}>When to use</Heading>
            <Paragraph>
                When you require your user to interact with you app and don’t want your users to jump to a
                different page and break their workflow.
            </Paragraph>
            <Paragraph>
                You should also use a dialog in cases where you need to ask for confirmation from the user before doing a
                lengthy or dangerous action. This could be a deletion of some sorts or initiating a lengthy download.
            </Paragraph>
            <Heading size={800}>Focus Management</Heading>
            <Paragraph>
                When opening a Dialog, focus will be brought inside the Dialog When using both the cancel and confirm button,
                the cancel button will get focus first.
            </Paragraph>
            <Paragraph>
                When closing the Dialog, focus will be brought back to the element that was focused before opening the Dialog.
                This is normally the button that triggered the Dialog.
            </Paragraph>
            <Heading size={800}>Alerts</Heading>
            <Paragraph>
                Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
function Usage() {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <div>
            <Dialog
                isShown={isOpen}
                onCloseComplete={() => setIsOpen(false)}
            >
                <DialogTitle id="alert-dialog-title">
                    Are we allowed to use analytical features?
                </DialogTitle>
                <DialogContent>
                    <Paragraph>
                        Let knk help to improve this app. This means sending anonymous usage data to knk, even when no apps are running.
                    </Paragraph>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setIsOpen(false)} appearance="primary">Agree</Button>
                    <Button onClick={() => setIsOpen(false)} appearance="primary" intent="danger">Disagree</Button>
                </DialogActions>
            </Dialog>
            <Button onClick={() => setIsOpen(true)}>Show Dialog</Button>
        </div>
    )
}
`
                }
            />

            <Heading size={800}>Full-screen dialogs</Heading>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
function Usage() {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <div>
            <Dialog
                isShown={isOpen}
                onCloseComplete={() => setIsOpen(false)}
                fullScreen
            >
                <DialogTitle id="alert-dialog-title">
                    Are we allowed to use analytical features?
                </DialogTitle>
                <DialogContent>
                    <Paragraph>
                        Let knk help to improve this app. This means sending anonymous usage data to knk, even when no apps are running.
                    </Paragraph>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setIsOpen(false)} appearance="primary">Agree</Button>
                    <Button onClick={() => setIsOpen(false)} appearance="primary" intent="danger">Disagree</Button>
                </DialogActions>
            </Dialog>
            <Button onClick={() => setIsOpen(true)}>Show Dialog</Button>
        </div>
    )
}
`
                }
            />
            
        </Layout>
    )
}