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

export const makeUInnerTagCountProps = propsFactory(
  {
    size: {
      type: String,
      default: 'sm',
      required: false,
    },
    count: {
      type: [Number, null] as PropType<number | null>,
      default: null,
      required: false,
    },

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

export type UInnerTagCountProps = ExtractPropTypes<
  typeof makeUInnerTagCountProps
>

export type UInnerTagCountSlots = {
  //
}

export const UInnerTagCount = genericComponent<UInnerTagCountSlots>()({
  name: 'UInnerTagCount',

  props: makeUInnerTagCountProps(),

  emits: {
    click: (e: MouseEvent) => true,
  },

  setup(props, { emit }) {
    const numberClasses = computed(() => {
      let classes = ''
      if (props.size === 'sm' || props.size === 'md') {
        classes = 'text-text-xs font-medium text-gray-700'
      } else if (props.size === 'lg') {
        classes = 'text-text-sm font-medium text-gray-700'
      }
      return classes
    })

    const size = computed(() => {
      let sizes = ''
      if (props.size === 'sm') {
        sizes = 'px-1'
      } else if (props.size === 'md') {
        sizes = 'px-1.3'
      } else if (props.size === 'lg') {
        sizes = 'px-1.5'
      }

      return sizes
    })

    const tagClasses = computed<string>(
      () =>
        `bg-gray-100 cursor-pointer rounded-3 ${size.value} flex justify-center items-center`
    )

    return () => (
      <div class="flex justify-center">
        <div class={tagClasses.value}>
          <span class={numberClasses.value}>{props.count}</span>
        </div>
      </div>
    )
  },
})

export type UInnerTagCount = InstanceType<typeof UInnerTagCount>