{"size": 2552, "ext": "js", "max_stars_repo_path": "packages/app/src/context/index.js", "max_stars_repo_name": "saraos-tech/cards", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/app/src/context/index.js", "max_issues_repo_name": "saraos-tech/cards", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/app/src/context/index.js", "max_forks_repo_name": "saraos-tech/cards", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.2673267327, "max_line_length": 107, "alphanum_fraction": 0.6810344828}
import { createContext, useCallback, useMemo, useRef } from 'react'

import { LiveProvider, presets } from '@/components'
import { useQueryState, useScreenshotUrl } from '@/hooks'
import { getPresetBySlug } from '@/lib'
import { DEFAULT_PRESET } from '@/constants'

import editorContext from './editor-context'
import overlayContext from './overlay-context'
import presetsContext from './presets-context'
import themeContext from './theme-context'

export const AppContext = createContext({})

const getDefaultPreset = slug => getPresetBySlug(presets, slug) || getPresetBySlug(presets, DEFAULT_PRESET)

export default function AppContextProvider ({ children }) {
  const [query, setQuery] = useQueryState()

  const presetRef = useRef(getDefaultPreset(query?.preset ?? DEFAULT_PRESET))

  const {
    code,
    handleCode,
    handleQueryVariables,
    queryVariables,
    setCode,
    setQueryVariables
  } = editorContext(presetRef, query, setQuery)

  const [screenshotUrl, syncScreenshotUrl, downloadScreenshot] = useScreenshotUrl(queryVariables)

  const onOverlayShow = useCallback(() => syncScreenshotUrl(queryVariables), [
    queryVariables,
    syncScreenshotUrl
  ])

  const { isOverlay, showOverlay, hideOverlay } = overlayContext(onOverlayShow)

  const onPresetChange = useCallback(
    (presetSlug, newPreset) => {
      presetRef.current = newPreset
      setCode(presetRef.current.code)
      setQueryVariables(presetRef.current.query)
      setQuery({ p: undefined, preset: presetSlug }, { replace: true })
    },
    []
  )

  const { handlePresetChange, presetOptions } = presetsContext(onPresetChange)

  const { colorMode, changeTheme, theme } = themeContext()

  const value = useMemo(
    () => ({
      changeTheme,
      code,
      colorMode,
      downloadScreenshot,
      handleCode,
      handlePresetChange,
      handleQueryVariables,
      hideOverlay,
      isOverlay,
      presetOptions,
      presetRef,
      query,
      queryVariables,
      screenshotUrl,
      showOverlay,
      theme
    }),
    [
      changeTheme,
      code,
      colorMode,
      downloadScreenshot,
      handleCode,
      handlePresetChange,
      handleQueryVariables,
      hideOverlay,
      isOverlay,
      presetOptions,
      presetRef,
      query,
      queryVariables,
      screenshotUrl,
      showOverlay,
      theme
    ]
  )

  return (
    <AppContext.Provider value={value}>
      <LiveProvider queryVariables={queryVariables} code={code}>
        {children}
      </LiveProvider>
    </AppContext.Provider>
  )
}
