css.ts

import type { ASTNode } from 'ast-types'
import { defu } from 'defu'
import type { PinceauContext } from 'pinceau/types'
import { parse } from 'acorn'
import { resolveCssProperty, stringify, stringifyKeyFrames } from '../utils'
import { message } from '../utils/logger'
import { parseAst, printAst, visitAst } from '../utils/ast'
import { resolveComputedStyles } from './vue/computed'
import { hash } from 'ohash'

/**
 * Stringify every call of css() into a valid Vue <style> declaration.
 */
export const transformCssFunction = (
  id: string,
  code = '',
  variants: any | undefined = {},
  computedStyles: any | undefined,
  ctx: PinceauContext,
  loc?: any,
) => {
  // Enhance error logging for `css()`
  try {
    parse(code, { ecmaVersion: 'latest' })
  }
  catch (e) {
    e.loc.line = (loc.start.line + e.loc.line) - 1
    const filePath = `${id.split('?')[0]}:${e.loc.line}:${e.loc.column}`
    message('TRANSFORM_ERROR', [filePath, e])
    return ''
  }

  const { keyFramesDeclaration, cssDeclaration } = resolveCssCallees(
    code,
    ast => evalCssDeclaration(ast, computedStyles),
  )

  // Handle variants and remove them from declaration
  if (cssDeclaration && cssDeclaration?.variants) {
    Object.assign(variants, defu(variants || {}, cssDeclaration?.variants || {}))
    delete cssDeclaration.variants
  }

  const animationText = stringifyKeyFrames(keyFramesDeclaration)

  return animationText + stringify(cssDeclaration, (property: any, value: any, _style: any, _selectors: any) => resolveCssProperty(property, value, _style, _selectors, ctx, loc))
}

/**
 * Transform a variants property to nested selectors.
 */
export function castVariants(property: any, value: any) {
  return Object.entries(value).reduce(
    (acc: any, [key, value]) => {
      acc[key] = value
      return acc
    },
    {},
  )
}

/**
 * Find all calls of css() and call a callback on each.
 */
export function resolveCssCallees(code: string, cb: (ast: ASTNode) => any): any {
  const ast = parseAst(code)
  let cssDeclaration: any = false
  let keyFramesDeclaration: any = false
  visitAst(ast, {
    visitCallExpression(path: any) {
      if (path.value.callee.name === 'css') {
        cssDeclaration = defu(cssDeclaration || {}, cb(path.value.arguments[0]))
      }
      return this.traverse(path)
    },
    visitVariableDeclaration(path: any) {
      if (path.value.declarations[0]?.init?.callee?.name === 'keyFrames') {
        const animateName = path.value.declarations[0]?.id?.name
        keyFramesDeclaration = defu(keyFramesDeclaration || {}, evalKeyFramesDeclaration(animateName, path.value.declarations[0]?.init?.arguments[0]))
      }

      return this.traverse(path)
    }
  })
  return { cssDeclaration, keyFramesDeclaration }
}

/**
 * Resolve computed styles found in css() declaration.
 */
export function evalCssDeclaration(cssAst: ASTNode, computedStyles: any = {}) {
  // Resolve computed styled from AST of css() call
  resolveComputedStyles(cssAst, computedStyles)

  try {
    // eslint-disable-next-line no-eval
    const _eval = eval

    // const transformed = transform({ source: recast.print(ast).code })
    _eval(`var cssDeclaration = ${printAst(cssAst).code}`)

    // @ts-expect-error - Evaluated code
    return cssDeclaration
  }
  catch (e) {
    return {}
  }
}


export function evalKeyFramesDeclaration(name: string, keyFramesAst: ASTNode) {
  try {
    // eslint-disable-next-line no-eval
    const _eval = eval
    const keyFramesCode = printAst(keyFramesAst).code
    const keyFrameName = hash(keyFramesCode)

    // set animate name
    _eval(`var ${name} = '${keyFrameName}'`)

    // const transformed = transform({ source: recast.print(ast).code })
    _eval(`var keyFramesDeclaration = {
      '${keyFrameName}':${keyFramesCode},
    }`)

    // @ts-expect-error - Evaluated code
    return keyFramesDeclaration
  }
  catch (e) {
    return {}
  }
}