import { AnyFunc, AnyObject } from 'pepka'
import { Renderer, css } from './main'
import { Options } from './types'
import { isFunction } from './utils'

export class SvelteRenderer extends Renderer {
  private f: Function
  private fdef: Function
  public getCSS() {
    return (rules: AnyObject) => {
      const context = { style: rules, fdef: this.fdef }
      return (
        className: string | AnyObject | AnyFunc,
        attrs?: AnyObject
      ) => this.f.call(context, className, attrs)
    }
  }
  public getLiteralCSS() {
    const rulz = this.getCSS()
    return (...template: [string[]]) => rulz(css(...template))
  }
  constructor(opts: Partial<Options> = {}) {
    super(opts)
    const mixin = this.mixin
    this.f = mixin.methods.f
    this.fdef = isFunction(opts.defStyles)
      ? mixin.computed.fdef
      : opts.defStyles && mixin.computed[(opts.defStyles as AnyObject).key]
  }
}