import { computed, defineComponent, h } from '@nuxtjs/composition-api'
import { css } from '@emotion/css'
import type { CSSObject } from '@emotion/css'
export { css }

type Tag =
  | 'a'
  | 'abbr'
  | 'address'
  | 'area'
  | 'article'
  | 'aside'
  | 'audio'
  | 'b'
  | 'base'
  | 'bdi'
  | 'bdo'
  | 'big'
  | 'blockquote'
  | 'body'
  | 'br'
  | 'button'
  | 'canvas'
  | 'caption'
  | 'cite'
  | 'code'
  | 'col'
  | 'colgroup'
  | 'data'
  | 'datalist'
  | 'dd'
  | 'del'
  | 'details'
  | 'dfn'
  | 'dialog'
  | 'div'
  | 'dl'
  | 'dt'
  | 'em'
  | 'embed'
  | 'fieldset'
  | 'figcaption'
  | 'figure'
  | 'footer'
  | 'form'
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'h5'
  | 'h6'
  | 'head'
  | 'header'
  | 'hgroup'
  | 'hr'
  | 'html'
  | 'i'
  | 'iframe'
  | 'img'
  | 'input'
  | 'ins'
  | 'kbd'
  | 'keygen'
  | 'label'
  | 'legend'
  | 'li'
  | 'link'
  | 'main'
  | 'map'
  | 'mark'
  | 'menu'
  | 'menuitem'
  | 'meta'
  | 'meter'
  | 'nav'
  | 'noscript'
  | 'object'
  | 'ol'
  | 'optgroup'
  | 'option'
  | 'output'
  | 'p'
  | 'param'
  | 'picture'
  | 'pre'
  | 'progress'
  | 'q'
  | 'rp'
  | 'rt'
  | 'ruby'
  | 's'
  | 'samp'
  | 'script'
  | 'section'
  | 'select'
  | 'small'
  | 'source'
  | 'span'
  | 'strong'
  | 'style'
  | 'sub'
  | 'summary'
  | 'sup'
  | 'table'
  | 'tbody'
  | 'td'
  | 'textarea'
  | 'tfoot'
  | 'th'
  | 'thead'
  | 'time'
  | 'title'
  | 'tr'
  | 'track'
  | 'u'
  | 'ul'
  | 'var'
  | 'video'
  | 'wbr'

export const mediaQuery = {
  mobile: `@media screen and (max-width: 767px)`,
  tablet: `@media screen and (min-width: 768px) and (max-width: 991px)`,
  laptop: `@media screen and (min-width: 992px) and (max-width: 1199px)`,
}

function createComponent(tag: Tag, style: string | ((props: any) => string)) {
  return defineComponent({
    props: {
      as: {
        type: String,
        default: '',
      },
    },
    setup(props, { attrs, slots }) {
      const className = computed(() => {
        if (typeof style === 'function') {
          const normalProps = (attrs: any) => {
            const normal: any = {}
            for (const key in attrs) {
              const value = attrs[key]
              normal[key] = value
              if (value === '') {
                normal[key] = true
              }
            }
            return normal
          }
          const normalized = normalProps(attrs)
          return style(normalized)
        }
        return style
      })
      return () =>
        h(
          props.as || tag,
          { class: className.value },
          slots && slots.default ? slots.default() : []
        )
    },
  })
}

export function styled(tag: Tag, style: string | ((props: any) => string)) {
  return createComponent(tag, style)
}

export function useStyle(style: CSSObject) {
  return computed(() => css(style))
}