import {PaneRouterContext} from '@sanity/desk-tool'
import {AddIcon, RemoveIcon} from '@sanity/icons'
import {Button, Card, Code, Inline, Label, Stack, Text} from '@sanity/ui'
import React, {useCallback, useContext} from 'react'

function DeveloperPreview(props) {
  const {payload = {}, setPayload} = useContext(PaneRouterContext)
  const {displayed} = props.document
  const {count = 0} = payload

  const handleDecr = useCallback(() => setPayload({count: count - 1}), [count, setPayload])
  const handleIncr = useCallback(() => setPayload({count: count + 1}), [count, setPayload])

  return (
    <Card height="fill" overflow="auto" padding={4} sizing="border" tone="transparent">
      <Stack space={5}>
        <Stack space={3}>
          <Label>Count payload</Label>
          <Inline space={2}>
            <Button icon={RemoveIcon} mode="ghost" padding={2} type="button" onClick={handleDecr} />
            <Text>{count}</Text>
            <Button icon={AddIcon} mode="ghost" padding={2} type="button" onClick={handleIncr} />
          </Inline>
        </Stack>

        <Stack space={3}>
          <Label>Displayed document</Label>
          <Code language="json">{JSON.stringify(displayed, null, 2)}</Code>
        </Stack>
      </Stack>
    </Card>
  )
}

export default DeveloperPreview

@@ -1166,17 +1166,39 @@
 e=%22json%22
-%3E
+ size=%7B1%7D%3E%0A            
 %7BJSON.st
@@ -1225,16 +1225,27 @@
 ull, 2)%7D
+%0A          
 %3C/Code%3E%0A

improve JSON preview