text: import MarketSelector from './MarketSelector'
  import { JsonSchemaViewer } from '@stoplight/json-schema-viewer'
  import './ViewSchemasPage.scss'
  import schemas from 'schemas.json'
  import { useLayoutEffect, useMemo, useState } from 'react'
  import PropertyTypeSelector from './PropertyTypeSelector'
  
  const markets = Object.keys(schemas).sort()
  
  const ViewSchemasPage = () => {
    const [market, setMarket] = useState(markets[0])
    const propertyTypes = useMemo(() => {
      return Object.keys(schemas[market]).sort()
    }, [market])
    const [propertyType, setPropertyType] = useState(propertyTypes[0])
    useLayoutEffect(() => {
      if (!propertyTypes.includes(propertyType)) {
        setPropertyType(propertyTypes[0])
      }
    }, [propertyTypes, propertyType])
  
    const schema = schemas[market][propertyType]
  
    return (
      <div className="view-schemas-page">
        <MarketSelector
          markets={markets}
          selectedMarket={market}
          onChange={setMarket}
        />
        <div id="page" className="viewer-panel">
          <PropertyTypeSelector
            propertyTypes={propertyTypes}
            selectedType={propertyType}
            onChange={setPropertyType}
          />
          <JsonSchemaViewer
            name="Market Schema"
            schema={schema || {}}
            expanded={true}
            hideTopBar={false}
            emptyText="No schema defined"
            defaultExpandedDepth={0}
          />
        </div>
      </div>
    )
  }
  
  export default ViewSchemasPage
  