module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
  excludedMeteorPackages: []
}

import 'meteor/blazeui:components/all'

const { BlazeUI } = await import('meteor/jkuester:blazeui/core/BlazeUI.js')
const { Badge } = await import('meteor/jkuester:blazeui/components/badge/Badge.js')

BlazeUI.register(Badge)

import '@blazeui/theme-milkyway/milkyway.css'

import { BlazeUI, Badge } from 'meteor/jkuester:blazeui/static'

BlazeUI.variants({
  ctx: Badge,
  type: 'size',
  values: {
    xs: "text-xs",
    sm: "text-sm",
    base: "text-base",
    lg: "text-lg p-2",
    xl: "text-xl p-3",
  },
  default: 'xs'
})

import { ReactiveDict } from 'meteor/reactive-dict'
import { BlazeUI } from 'meteor/blazeui:core'
import './Hello.html'

const Hello = {
  /**
   * Required, must exactly match the name of the Template!
   */
  name: 'Hello',

  /**
   * Optional, the base class that is always applied.
   * Can be overridden.
   */
  class: 'p-1 bg-primary text-primary-foreground transition-all ease-in-out',

  /**
   * Optional, a RactiveDict that can be used to manage internal
   * state. You can also use a custom reactive data source as long
   * as implements the methods of ReactiveDict (get, set, all etc.).
   */
  state: new ReactiveDict({ active: false }),

  /**
   * Optional function if you need to resolve attributes for the component
   * with awareness of the state.
   * Reactive: This method gets called, when props or state change.
   *
   * @param props {object} the object, returned by {Template.currentData()}
   * @param state {object|undefined} present, when {state} is defined on the component.
   * @param api {BlazeUI} the BlazeUI top-level api is always passed down to components.
   * @return {{role: string, class: string}}
   */
  attributes ({ props, state, api }) {
    const { class:className, ...rest } = props
    const { merge } = api.styles()
    const { active } = state

    return  {
      role: 'button',
      class: merge(
        Hello.class,
        active ? 'text-4xl' : 'text-xs',
        className
      ),
      ...rest
    }
  },
  /**
   * This is passed to the Template's `onCreated` method.
   * Note, that state is only passed, when being defined on this
   * component.
   * @param state {object?}
   */
  onCreated ({ state }) {
    const instance = this
    instance.state = state
  },
  helpers: {
    active() {
      return Template.instance().state.get('active')
    }
  },
  events: {
    'click div' (e, t) {
      // this results in 'attributes' being called right after
      t.state.set('active', !t.state.get('active'))
    }
  }
}

BlazeUI.register(Hello)

export const MyComponent = {
  name: 'MyComponent',
  class: 'p-4 border rounded-md',
  state: ({ instance }) => {
    // attach state to the instance
    // so the blazeui_context helper
    // will pick it up.
    // convention: it must be named "state"
    // and exist as property of the instance
    instance.state = new ReactiveDict({
      active: false
    })
    return instance.state
  },
  attributes ({ props, state, api }) {
    const { merge } = api.styles()
    const active = state.get('active')
    return {
      data-active: active, // this also updates when children change the state
      class: merge(MyComponent.class, props.class)
    }
  }
}

export const MyComponentTrigger = {
  name: 'MyComponentTrigger',
  class: 'border bg-primary rounded-md font-semibold text-primary-foreground',
  state: ({ instance, api }) => {
    // this will automatically pick up the state from the parent
    // no matter which level of depth this child is curently located.
    const { useFromContext  } = api.state()
    return useFromContext({ instance, key: 'MyComponentContext' })
  },
  events: {
    'click button' (e, t) {
      // toggle active
      t.state.set({ active: !t.state.get('active') })
    }
  }
}