Modal

function Example() {
  const [visible, setVisible] = React.useState(false)

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Modal zIndex={100} visible={visible} onClose={() => setVisible(false)}>
        Modal
      </Modal>
    </>
  )
}

function Example() {
  const [visible, setVisible] = React.useState(false)
  const [actions, setActions] = React.useState(1)

  const closeButton = (
    <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
  )

  return (
    <>
      <Box space={2}>
        <ActionButton
          onClick={() => {
            setActions(1)
            setVisible(true)
          }}>
          Open with 1 Action
        </ActionButton>
        <ActionButton
          onClick={() => {
            setActions(2)
            setVisible(true)
          }}>
          Open with 2 Actions
        </ActionButton>
      </Box>
      <Modal
        zIndex={100}
        title="Very long title that breaks on multiple lines"
        visible={visible}
        onClose={() => setVisible(false)}
        actions={Array.from(Array(actions).keys()).map(() => closeButton)}>
        <Text>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
          <br />
          <br />
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
        </Text>
      </Modal>
    </>
  )
}

function Example() {
  const [outerVisible, setOuterVisible] = React.useState(false)
  const [innerVisible, setInnerVisible] = React.useState(false)
  const innerTriggerRef = React.useRef(null)

  return (
    <>
      <ActionButton onClick={() => setOuterVisible(true)}>
        Open Outer Modal
      </ActionButton>

      <Modal
        title="Outer Modal"
        visible={outerVisible}
        onClose={() => setOuterVisible(false)}>
        <Box space={4}>
          <Text>This is the outer modal content.</Text>
          <ActionButton
            ref={innerTriggerRef}
            onClick={() => setInnerVisible(true)}>
            Open Inner Modal
          </ActionButton>
        </Box>
      </Modal>

      <Modal
        title="Inner Modal"
        visible={innerVisible}
        onClose={() => setInnerVisible(false)}
        triggeredByRef={innerTriggerRef}
        zIndex={20}>
        <Box space={4}>
          <Text>This is the inner modal content.</Text>
          <Text>
            When this modal closes, focus will be restored to the button in the
            outer modal that opened it.
          </Text>
          <ActionButton onClick={() => setInnerVisible(false)}>
            Close Inner Modal
          </ActionButton>
        </Box>
      </Modal>
    </>
  )
}

function Example() {
  const [visible, setVisible] = React.useState(false)

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>
        Open Modal with Overlay Fallback
      </ActionButton>

      <Modal
        title="Fallback Modal"
        visible={visible}
        onClose={() => setVisible(false)}
        useDialog={false}>
        <Box space={4}>
          <Text>
            This modal uses the overlay-based implementation instead of the
            native dialog element.
          </Text>
          <Text>
            This can be useful for testing compatibility or when you need
            consistent behavior across all browsers.
          </Text>
          <ActionButton onClick={() => setVisible(false)}>
            Close Modal
          </ActionButton>
        </Box>
      </Modal>
    </>
  )
}