<ModalTrigger>
    <Button variant="secondary">Open</Button>
    <Modal>
        <Heading>Cloud City</Heading>
        <Content>
            <Paragraph>
                Cloud City was a completely man-made tibanna gas mining colony staff hovering over
                the gas giant Bespin, occupied by millions of workers, tourists and support staff.
                Located in Bespin's Life Zone, the station had no need for airlocks or life support
                systems, with the atmosphere comprised mostly of oxygen and acceptable levels of
                gravity and temperature.
            </Paragraph>
            <Paragraph>
                The station was situated 59,000 kilometers above Bespin's core, while its disk was
                approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor
                beam generators kept the giant city floating above the planet. It contained 392
                levels, along with platforms and rooms for residents and visitors.
            </Paragraph>
        </Content>
    </Modal>
</ModalTrigger>

<ModalTrigger>
    <Button variant="secondary">Open</Button>
    <Modal>
        <Image
            src={{
                base: SpacePortraitHorizontal,
                sm: SpacePortrait
            }}
            alt="City over clouds"
        />
        <Heading>Cloud City</Heading>
        <Content>
            <Paragraph>
                Cloud City was a completely man-made tibanna gas mining colony staff hovering over
                the gas giant Bespin, occupied by millions of workers, tourists and support staff.
                Located in Bespin's Life Zone, the station had no need for airlocks or life support
                systems, with the atmosphere comprised mostly of oxygen and acceptable levels of
                gravity and temperature.
            </Paragraph>
            <Paragraph>
                The station was situated 59,000 kilometers above Bespin's core, while its disk was
                approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor
                beam generators kept the giant city floating above the planet. It contained 392
                levels, along with platforms and rooms for residents and visitors.
            </Paragraph>
        </Content>
    </Modal>
</ModalTrigger>

<ModalTrigger>
    <Button variant="secondary">Open</Button>
    <Modal>
        <Illustration backgroundColor="alias-accent-light">
            <Image src={Planet} alt="Planet Logo" />
        </Illustration>
        <Heading>Cloud City</Heading>
        <Content>
            <Paragraph>
                Cloud City was a completely man-made tibanna gas mining colony staff hovering over
                the gas giant Bespin, occupied by millions of workers, tourists and support staff.
                Located in Bespin's Life Zone, the station had no need for airlocks or life support
                systems, with the atmosphere comprised mostly of oxygen and acceptable levels of
                gravity and temperature.
            </Paragraph>
            <Paragraph>
                The station was situated 59,000 kilometers above Bespin's core, while its disk was
                approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor
                beam generators kept the giant city floating above the planet. It contained 392
                levels, along with platforms and rooms for residents and visitors.
            </Paragraph>
        </Content>
    </Modal>
</ModalTrigger>

<ModalTrigger>
    <Button variant="secondary">Open</Button>
    <Modal>
        <Heading>Which of the following movie is the greatest space movie?</Heading>
        <Content>
            <Card>
                <Image src={ET} alt="E.T. poster" />
                <Heading>E.T.</Heading>
                <Content>
                    "E.T. phone home,"" mutters the titular character as he attempts to contact his
                    home planet, and audiences around the world fell in love. The timeless story of
                    an intimate friendship between a boy and his alien friend, “E.T.” has resonated
                    with generations of families, and is widely considered one of the greatest films
                    of all time.
                </Content>
                <Button variant="secondary">Choose</Button>
            </Card>
            <Card>
                <Image src={TheMartian} alt="The Martian poster" />
                <Heading>The Martian</Heading>
                <Content>
                    Based on the popular novel, “The Martian” is about mankind joining for a
                    singular mission: save astronaut Mark Watney, who was abandoned on Mars after
                    the rest of his crew made an emergency exit during a dust storm.
                </Content>
                <Button variant="secondary">Choose</Button>
            </Card>
        </Content>
    </Modal>
</ModalTrigger>

<ModalTrigger>
    <Button variant="secondary">Open</Button>
    <Modal>
        <Heading>Cloud City</Heading>
        <Header>
            <TextLink
                href="https://en.wikipedia.org/wiki/Floating_cities_and_islands_in_fiction"
                external
            >
                Wikipedia
            </TextLink>
        </Header>
        <Content>
            <Paragraph>
                Cloud City was a completely man-made tibanna gas mining colony staff hovering over
                the gas giant Bespin, occupied by millions of workers, tourists and support staff.
                Located in Bespin's Life Zone, the station had no need for airlocks or life support
                systems, with the atmosphere comprised mostly of oxygen and acceptable levels of
                gravity and temperature.
            </Paragraph>
            <Paragraph>
                The station was situated 59,000 kilometers above Bespin's core, while its disk was
                approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor
                beam generators kept the giant city floating above the planet. It contained 392
                levels, along with platforms and rooms for residents and visitors.
            </Paragraph>
        </Content>
    </Modal>
</ModalTrigger>

<ModalTrigger>
    <Button variant="secondary">Open</Button>
    <Modal>
        <Heading>Cloud City</Heading>
        <Content>
            <Paragraph>
                Cloud City was a completely man-made tibanna gas mining colony staff hovering over
                the gas giant Bespin, occupied by millions of workers, tourists and support staff.
                Located in Bespin's Life Zone, the station had no need for airlocks or life support
                systems, with the atmosphere comprised mostly of oxygen and acceptable levels of
                gravity and temperature.
            </Paragraph>
            <Paragraph>
                The station was situated 59,000 kilometers above Bespin's core, while its disk was
                approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor
                beam generators kept the giant city floating above the planet. It contained 392
                levels, along with platforms and rooms for residents and visitors.
            </Paragraph>
        </Content>
        <Footer>Copyright 2021</Footer>
    </Modal>
</ModalTrigger>

<ModalTrigger>
    <Button variant="secondary">Open</Button>
    <Modal>
        <Heading>Cloud City</Heading>
        <Content>
            <Paragraph>
                Cloud City was a completely man-made tibanna gas mining colony staff hovering over
                the gas giant Bespin, occupied by millions of workers, tourists and support staff.
                Located in Bespin's Life Zone, the station had no need for airlocks or life support
                systems, with the atmosphere comprised mostly of oxygen and acceptable levels of
                gravity and temperature.
            </Paragraph>
            <Paragraph>
                The station was situated 59,000 kilometers above Bespin's core, while its disk was
                approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor
                beam generators kept the giant city floating above the planet. It contained 392
                levels, along with platforms and rooms for residents and visitors.
            </Paragraph>
        </Content>
        <Button>Choose</Button>
    </Modal>
</ModalTrigger>

<ModalTrigger>
    <Button variant="secondary">Open</Button>
    <Modal>
        <Heading>Cloud City</Heading>
        <Content>
            <Paragraph>
                Cloud City was a completely man-made tibanna gas mining colony staff hovering over
                the gas giant Bespin, occupied by millions of workers, tourists and support staff.
                Located in Bespin's Life Zone, the station had no need for airlocks or life support
                systems, with the atmosphere comprised mostly of oxygen and acceptable levels of
                gravity and temperature.
            </Paragraph>
            <Paragraph>
                The station was situated 59,000 kilometers above Bespin's core, while its disk was
                approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor
                beam generators kept the giant city floating above the planet. It contained 392
                levels, along with platforms and rooms for residents and visitors.
            </Paragraph>
        </Content>
        <ButtonGroup>
            <Button variant="secondary">Select</Button>
            <Button>Next</Button>
        </ButtonGroup>
    </Modal>
</ModalTrigger>

const ApolloModal = forwardRef(({ children, ...rest }, ref) => {
    const { close } = useModalTriggerContext();

    return (
        <Modal {...rest} ref={ref}>
            <Heading>Apollo 11 movie</Heading>
            <Content>
                <Paragraph>
                    Apollo 11 is a 2019 American documentary film edited, produced and directed by
                    Todd Douglas Miller. It focuses on the 1969 Apollo 11 mission, the first
                    spaceflight from which men walked on the Moon.
                </Paragraph>
                <Paragraph>
                    The film consists solely of archival footage, including 70 mm film previously
                    unreleased to the public, and does not feature narration, interviews or modern
                    recreations. The Saturn V rocket, Apollo crew consisting of Buzz Aldrin, Neil
                    Armstrong, and Michael Collins, and Apollo program Earth-based mission
                    operations engineers are prominently featured in the film.
                </Paragraph>
            </Content>
            <Button onClick={close} variant="secondary">
                Close
            </Button>
        </Modal>
    );
});

render(() => {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open</Button>
            <ApolloModal />
        </ModalTrigger>
    );
});

const CustomCloseModal = forwardRef(({ children, ...rest }, ref) => {
    const { close } = useModalTriggerContext();

    return (
        <Modal {...rest} ref={ref}>
            <Heading>Apollo 11 movie</Heading>
            <Content>
                <Paragraph>
                    Apollo 11 is a 2019 American documentary film edited, produced and directed by
                    Todd Douglas Miller. It focuses on the 1969 Apollo 11 mission, the first
                    spaceflight from which men walked on the Moon.
                </Paragraph>
                <Paragraph>
                    The film consists solely of archival footage, including 70 mm film previously
                    unreleased to the public, and does not feature narration, interviews or modern
                    recreations. The Saturn V rocket, Apollo crew consisting of Buzz Aldrin, Neil
                    Armstrong, and Michael Collins, and Apollo program Earth-based mission
                    operations engineers are prominently featured in the film.
                </Paragraph>
            </Content>
            <Button onClick={close} variant="secondary">
                Close
            </Button>
        </Modal>
    );
});

render(() => {
    return (
        <ModalTrigger dismissable={false}>
            <Button variant="secondary">Trigger</Button>
            <CustomCloseModal />
        </ModalTrigger>
    );
});

() => {
    const [isOpen, setIsOpen] = useState(false);

    const handleOpenChange = useCallback(
        (event, newValue) => {
            setIsOpen(newValue);
            console.log(newValue);
        },
        [setIsOpen]
    );

    const handleClose = useCallback(() => {
        setIsOpen(false);
    }, [setIsOpen]);

    return (
        <ModalTrigger open={isOpen} onOpenChange={handleOpenChange}>
            <Button variant="secondary">Open</Button>
            <Modal>
                <Heading>Apollo 11 movie</Heading>
                <Content>
                    <Paragraph>
                        Apollo 11 is a 2019 American documentary film edited, produced and directed
                        by Todd Douglas Miller. It focuses on the 1969 Apollo 11 mission, the first
                        spaceflight from which men walked on the Moon.
                    </Paragraph>
                    <Paragraph>
                        The film consists solely of archival footage, including 70 mm film
                        previously unreleased to the public, and does not feature narration,
                        interviews or modern recreations. The Saturn V rocket, Apollo crew
                        consisting of Buzz Aldrin, Neil Armstrong, and Michael Collins, and Apollo
                        program Earth-based mission operations engineers are prominently featured in
                        the film.
                    </Paragraph>
                </Content>
                <Button onClick={handleClose} variant="secondary">
                    Close
                </Button>
            </Modal>
        </ModalTrigger>
    );
};

() => {
    const [isOpen, setIsOpen] = useState(false);

    const handleTriggerClick = useCallback(() => {
        setIsOpen(true);
    }, [setIsOpen]);

    const handleModalClose = useCallback(() => {
        setIsOpen(false);
    }, [setIsOpen]);

    return (
        <>
            <Button onClick={handleTriggerClick} variant="secondary">
                Open
            </Button>
            <Overlay show={isOpen}>
                <Modal onClose={handleModalClose}>
                    <Heading>Apollo 11 movie</Heading>
                    <Content>
                        <Paragraph>
                            Apollo 11 is a 2019 American documentary film edited, produced and
                            directed by Todd Douglas Miller. It focuses on the 1969 Apollo 11
                            mission, the first spaceflight from which men walked on the Moon.
                        </Paragraph>
                        <Paragraph>
                            The film consists solely of archival footage, including 70 mm film
                            previously unreleased to the public, and does not feature narration,
                            interviews or modern recreations. The Saturn V rocket, Apollo crew
                            consisting of Buzz Aldrin, Neil Armstrong, and Michael Collins, and
                            Apollo program Earth-based mission operations engineers are prominently
                            featured in the film.
                        </Paragraph>
                    </Content>
                </Modal>
            </Overlay>
        </>
    );
};