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

export const makeUPaginationNumberProps = propsFactory(
  {
    shape: {
      type: String,
      default: 'square',
      required: false,
    },
    isActive: {
      type: Boolean,
      default: false,
      required: false,
    },

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

export type UTooltipSlots = {
  default: never
}

export type UPaginationNumberProps = ExtractPropTypes<
  typeof makeUPaginationNumberProps
>

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

  props: makeUPaginationNumberProps(),

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

  setup(props, { emit, slots }) {
    const isHovered = ref(false)

    const bgClasses = computed(() => {
      return props.isActive || isHovered.value
        ? 'bg-gray-50'
        : 'bg-transparent '
    })

    const classes = computed(() => ({
      [`cursor-pointer box-border flex items-center justify-center w-fit py-2.5 px-4.5 text-text-sm 
  font-medium text-gray-600 hover:text-gray-800 active:text-gray-600 
  hover:bg-gray-50 active:bg-gray-50 ${bgClasses.value}`]: true,
      [`rounded-full`]: props.shape === 'circle',
      [`rounded-8`]: props.shape === 'square',
    }))

    const switchHovorState = () => {
      isHovered.value = !isHovered.value
    }

    return () => (
      <div
        class={classes.value}
        onMouseenter={switchHovorState}
        onMouseleave={switchHovorState}
        onClick={(e: MouseEvent) => emit('click', e)}
      >
        {slots.default?.()}
      </div>
    )
  },
})

export type UPaginationNumber = InstanceType<typeof UPaginationNumber>