Dialog

const Preview = () => {
  return (
    <Dialog.TriggerContext>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog>
        <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
          Dialog header
        </Heading>
        <Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
          doloremque obcaecati assumenda odio ducimus sunt et.
        </Paragraph>
        <Paragraph data-size='sm'>Dialog footer</Paragraph>
      </Dialog>
    </Dialog.TriggerContext>
  );
};

render(<Preview />)

const ModalDialog = () => (
  <Dialog.TriggerContext>
    <Dialog.Trigger>Åpne modal Dialog</Dialog.Trigger>
    <Dialog id='my-dialog-modal'>
      <Dialog.Block>
        <Paragraph data-size='sm'>Bekreft endring</Paragraph>
        <Heading>Er du sikker på at du vil endre søknaden? </Heading>
      </Dialog.Block>
      <Dialog.Block>
        <Paragraph>
          OBS! Du bør ikke endre søknaden etter at fristen har gått ut. Hvis du
          endrer søknaden nå, er du ikke lenger med i kommende opptak. Ring
          kontaktsenteret på telefon 00 00 00 00 hvis du trenger veiledning.
        </Paragraph>
      </Dialog.Block>
      <Dialog.Block>
        <div
          style={{
            display: 'flex',
            gap: 'var(--ds-size-4)',
            marginTop: 'var(--ds-size-4)',
          }}
        >
          <Button
            variant='primary'
            data-color='danger'
            command='close'
            commandfor='my-dialog-modal'
          >
            Ja, endre
          </Button>
          <Button
            variant='secondary'
            command='close'
            commandfor='my-dialog-modal'
          >
            Avbryt
          </Button>
        </div>
      </Dialog.Block>
    </Dialog>
  </Dialog.TriggerContext>
);

render(<ModalDialog />)

const NonModalDialog = () => (
  <Dialog.TriggerContext>
    <Dialog.Trigger>Åpne ikke-modal Dialog</Dialog.Trigger>
    <Dialog
      modal={false}
      style={{
        zIndex: '10',
        top: 'calc(100vh - 290px)',
        left: 'calc(100vw - 385px)',
        margin: 0,
        maxWidth: '350px',
      }}
    >
      <Heading style={{ marginBottom: 'var(--ds-size-4)' }}>
        Vi ønsker din mening
      </Heading>
      <Label htmlFor='my-textarea'>Hvordan var din opplevelse?</Label>
      <Textarea
        id='my-textarea'
        style={{
          marginBottom: 'var(--ds-size-6)',
        }}
      />
      <Button>Send inn</Button>
    </Dialog>
  </Dialog.TriggerContext>
);

render(<NonModalDialog />)

const Drawer = () => {
  const [placement, setPlacement] =
    useState<DialogProps['placement']>('bottom');
  const [modal, setModal] = useState(true);

  return (
    <>
      <Checkbox
        label='Modal'
        checked={modal}
        style={{ marginBottom: 'var(--ds-size-4)' }}
        onChange={(e) => setModal(e.target.checked)}
      />
      <Fieldset
        onChange={(e: ChangeEvent<HTMLFieldSetElement>) => {
          const target = e.target as unknown as HTMLInputElement;
          setPlacement(target.value as DialogProps['placement']);
        }}
      >
        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 'var(--ds-size-5)',
            marginBottom: 'var(--ds-size-8)',
          }}
        >
          <Radio name='drawer' label='Center' value='center' />
          <Radio name='drawer' label='Top' value='top' />
          <Radio name='drawer' label='Bottom' value='bottom' />
          <Radio name='drawer' label='Left' value='left' />
          <Radio name='drawer' label='Right' value='right' />
        </div>
      </Fieldset>
      <Dialog.TriggerContext>
        <Dialog.Trigger>Open Dialog</Dialog.Trigger>
        <Dialog
          modal={modal}
          closedby='any'
          placement={placement}
          style={{ zIndex: '10' }}
        >
          <Dialog.Block>
            <Paragraph>
              This is a {modal ? 'modal' : 'non-modal'} Dialog with{' '}
              <code>placement="{placement}"</code>
            </Paragraph>
          </Dialog.Block>
        </Dialog>
      </Dialog.TriggerContext>
    </>
  );
};

render(<Drawer />)