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 Popover() {
    return (
        <Layout
            title="Popover"
            showHero
            description="The Popover component displays floating content in relation to a target. Popovers appear either at the top, bottom, left or right of their target. The preferred and default side is the bottom. Popovers use smart positioning if there is not enough space."
            sidebar={ComponentsSidebar}
        >
            <Heading size={800}>Implementation details</Heading>
            <Paragraph>
                The <Code>Popover</Code> uses the <Code>Positioner</Code> from knkUI to
                handle the positioning logic. Internally the Popover will make sure the
                Popover is positioned within the viewport.
                This means that sometimes the Popover flips — or the Popover might move
                slightly to the left or right.
            </Paragraph>
            <Heading size={800}>Usage</Heading>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
function Usage() {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <Popover
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            placement="bottom-start"
            content={() => (
                <Paper
                    style={{
                        backgroundColor: 'lightblue',
                        width: 175,
                        height: 100,
                        padding: 8,
                    }}
                >
                    <Text>This is rendered inside the Popover</Text>
                </Paper>
            )}
            trigger={(triggerProps) => (
                <Button
                    {...triggerProps}
                    onClick={() => setIsOpen(!isOpen)}
                >
                    TriggerButton
                </Button>
            )}
        />
    )
}
`
                }
            />


            <Heading size={700}>Content updates</Heading>
            <Paragraph>
                Sometimes we will want to change the content inside the popup - but you'll
                notice it won't move itself it an appropriate position after because the
                parent popup doesn't actually know anything happened! To fix this you can
                use a function passed to the content called scheduleUpdate()!
            </Paragraph>
            <SyntaxHighlighter
                language="jsx"
                children={
`
<Popup
  content={props => (
    // Call schedule update when things change
    <Component onUpdate={props.scheduleUpdate} />
  )}
/>
`
                }
            />
        </Layout>
    )
}