import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ExtractPropTypes } from 'vue'
import { computed } from 'vue'

export const makeUCardProps = propsFactory(
  {
    color: {
      type: String,
      default: 'transparent',
      required: false,
    },
    shadow: {
      type: String,
      default: 'none',
      required: false,
    },
    rounded: {
      type: String,
      default: 'none',
      required: false,
    },
    borderColor: {
      type: String,
      default: 'none',
      required: false,
    },

    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'UCard'
)

export type UCardProps = ExtractPropTypes<typeof makeUCardProps>

export type UCardSlots = {
  default: never
}

export const UCard = genericComponent<UCardSlots>()({
  name: 'UCard',

  props: makeUCardProps(),

  setup(props, { slots }) {
    const borderRadius = computed(() => {
      return props.rounded === 'none' ? '' : `rounded-${props.rounded}`
    })

    const border = computed(() => {
      return !props.borderColor ? '' : `border border-${props.borderColor}`
    })

    const shadow = computed(() => {
      return props.shadow === 'none' ? '' : `shadow-${props.shadow}`
    })

    const classes = computed(() => [
      props.class,
      `bg-${props.color}`,
      shadow.value,
      border.value,
      borderRadius.value,
    ])

    return () => (
      <div class={classes.value} style={props.style}>
        {slots.default?.()}
      </div>
    )
  },
})

export type UCard = InstanceType<typeof UCard>