// styles
import './UApp.scss'

// Composables
import { makeComponentProps } from '@/composables/component'
import { createLayout, makeLayoutProps } from '@/composables/layout'

// Utilities
import { genericComponent, propsFactory, useRender } from '@/utils'

export const makeUAppProps = propsFactory(
  {
    ...makeComponentProps(),
    ...makeLayoutProps({ fullHeight: true }),
  },
  'UApp'
)

export const UApp = genericComponent()({
  name: 'UApp',

  props: makeUAppProps(),

  setup(props, { slots }) {
    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } =
      createLayout(props)

    useRender(() => (
      <div
        ref={layoutRef}
        class={[
          'u-application',
          // theme.themeClasses.value,
          layoutClasses.value,
          // rtlClasses.value,
          props.class,
        ]}
        style={[layoutStyles.value, props.style]}
      >
        <div class="u-application__wrap">{slots.default?.()}</div>
      </div>
    ))

    return {
      getLayoutItem,
      items,
    }
  },
})

export type UApp = InstanceType<typeof UApp>