import * as basedReact from '@based/react'
import * as basedUI from '@based/ui'
import * as rand from '@ngneat/falso'
import * as dateFns from 'date-fns'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { useLiveRunner } from 'react-live-runner'
import * as contentRenderers from './contentRenderers'

const LiveRunnerPreview = ({ code }: Based.UI.Playground.Content.Preview) => {
  const scope = {
    useState,
    useMemo,
    useCallback,
    useEffect,
    ...basedUI,
    ...basedReact,
    ...contentRenderers,
    ...dateFns,
    ...rand,
  }

  const { element } = useLiveRunner({
    initialCode: code,
    scope,
  })

  return element
}

const MemoizedLiveRunnerPreview = memo(LiveRunnerPreview)

export const Preview = ({ code }: Based.UI.Playground.Content.Preview) => {
  return <MemoizedLiveRunnerPreview code={code} />
}
