"use client"

import { createContext, useContext, type ReactNode } from "react"
import type { DocParagraphStylesCatalog } from "@/lib/drive/docs-paragraph-styles"
import type { DocParagraphStylesState } from "@/lib/drive/docs-styles-types"

export type DocsParagraphStylesContextValue = {
  state: DocParagraphStylesState
  applyStyle: (styleId: string) => void
  updateStyleFromSelection: (styleId: string) => void
  createUserStyle: (input: { name: string; basedOn?: string }) => void
  updateDocumentStyle: (
    styleId: string,
    definition: DocParagraphStylesCatalog["definitions"][string]
  ) => void
}

const DocsParagraphStylesContext = createContext<DocsParagraphStylesContextValue | null>(null)

export function DocsParagraphStylesProvider({
  value,
  children,
}: {
  value: DocsParagraphStylesContextValue
  children: ReactNode
}) {
  return (
    <DocsParagraphStylesContext.Provider value={value}>{children}</DocsParagraphStylesContext.Provider>
  )
}

export function useDocsParagraphStylesContext() {
  return useContext(DocsParagraphStylesContext)
}