/// <reference types="vite/client" />

import {applyTransforms} from './helpers'
import {TemplateProps} from '../../../src/types/template'

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore because Vite and Esbuild have been told how to handle this
// but in this exoplanet-toolkit context `TEMPLATE` is not defined
import values from 'TEMPLATE/data/values.mjs'

const devBase = `/src`

/**
 * Processes incoming props and merges them with the default props.
 *
 * @param props - the TemplateProps object passed from the template component
 * @returns the processed values ready for display in the template
 * @category Hooks
 * @example
 * ```jsx
 * import useTemplate from '@/hooks/useTemplate'
 *
 * const Template = (props) => {
 *   // pass the props from the line above
 *   // into useTemplate in the line below
 *   const {root, heading} = useTemplate(props)
 *   // now you can use `root` (for local img paths)
 *   // and `heading `(either from values, or user input)
 *   // like this
 *   return (
 *     <Body>
 *       <h1>{heading}</h1>
 *       <img
 *         src={`${root}/img/logo.png`}
 *         alt="image that works in all environments"
 *       />
 * ```
 */
export const useTemplate = ({
  content = {},
  page = {},
  templateUrl: baseUrl = devBase,
  templateRoot: root = devBase,
  localeValues = {},
}: TemplateProps): {
  /**
   * This the path to the template’s root directory, which can be different between dev and production. Prepend paths to local images with this variable to ensure they work in all environments.
   */
  root: string
  /**
   * If the template has multiple pages, this will contain the values specific to the current page.
   */
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  page: Record<string, any>
  /**
   * @deprecated - use `root` instead
   */
  baseUrl: string
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  [key: string]: any
} => {
  // console.log(`raw content`, content)

  // TODO: track content state here?

  const userPage = content?.page ?? {}
  const combinedPage = Object.assign({}, page, userPage)

  const userContent = applyTransforms(content)
  const userPageContent = applyTransforms(combinedPage)

  const output = {
    ...values,
    ...localeValues,
    ...userContent,
    page: userPageContent,
    baseUrl,
    root,
  }

  //TODO: set content state here?

  // console.log(`output`, output)
  return output
}

export default useTemplate