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

export default function Sheet() {
    return (
        <Layout
            title="Sheet"
            showHero
            description="Sheets are surfaces containing supplementary content that are anchored to the left, right, bottom or top edge of the screen. It is used to show more details about a certain object."
            sidebar={ComponentsSidebar}
        >
            <Heading size={700}>When not to use a side sheet</Heading>
            <Paragraph>
                Sheets are a great way to cheat creating a new page.
                As a general rule of thumb, a Sheet should not be used as a replacement of a new page when the page needs to be accessible by a URL.
                Avoid showing a Sheet based on a URL.
            </Paragraph>
            <Heading size={600}>Implementation details</Heading>
            <Paragraph>
                The Sheet component does not have any opinion about the contents of the Sheet.
                In the examples below are some recipes to make sure usage of the Sheet is consistent. It is recommended to compose more opinionated Sheets in the consuming application.
            </Paragraph>
            <Heading size={600}>Focus management</Heading>
            <Paragraph>
                When opening the <Code>Sheet</Code>, focus will be brought inside the <Code>Sheet</Code> by
                looking for elements with <Code>[autofocus]</Code> first, <Code>[tabindex] </Code> second and <Code>button</Code> last.
            </Paragraph>
            <Paragraph>
                When closing the <Code>Sheet</Code>, focus will be brought back to the element that was focused before opening the Sheet.
                This is normally the button that triggered the Sheet.
            </Paragraph>
            <Heading size={800}>Basic example</Heading>
            <Playground
                codeText={
`
function BasicExample() {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <React.Fragment>
            <Sheet
                isShown={isOpen}
                onCloseComplete={() => setIsOpen(false)}
            >
            
            </Sheet>
            <Button onClick={() => setIsOpen(true)}>Show Basic Sheet</Button>
        </React.Fragment>
    )
}
`
                }
            />

            <Heading size={800}>Change Position</Heading>
            <Paragraph>
                The Sheet component can appearn on all side of the screens.
            </Paragraph>
            <Playground
                codeText={
                    `
function BasicExample() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [position, setPosition] = React.useState('right')

    return (
        <React.Fragment>
            <Sheet
                isShown={isOpen}
                onCloseComplete={() => setIsOpen(false)}
                position={position}
            >
                <Paragraph>Hello!</Paragraph>
            </Sheet>
            <select
                value={position}
                style={{ marginRight: 16 }}
                onChange={(e) => setPosition(e.target.value)}
            >
                <option value="right">Right</option>
                <option value="left">Left</option>
                <option value="bottom">Bottom</option>
                <option value="top">Top</option>
            </select>
            <Button appearance="primary" onClick={() => setIsOpen(true)}>Show Basic Sheet</Button>
        </React.Fragment>
    )
}
`
                }
            />
        </Layout>
    )
}