import React from 'react'
import styled from 'styled-components'
import { Box, TextBox } from 'ui-kit'

const Wrapper = styled(Box)`
  position: fixed;
  top: 0;
  right: 0;
  overflow: auto;
  font-size: 80%;
  z-index: 9999;
`

export const ShowProps = ({
  props,
  transformData = (data) => data,
}: {
  props: object
  transformData: (data: object) => object
}) => {
  let output
  try {
    output = JSON.stringify(transformData(props), null, 2)
  } catch (ex) {
    output = `ERROR: ${ex.message} ${ex.stacktrace}`
  }

  return (
    <Wrapper use='pre' width='25vw' maxHeight='100vh'>
      <TextBox bg='grey-100' color='grey-35' variant='caption' p={1}>
        {output}
      </TextBox>
    </Wrapper>
  )
}