import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ExtractPropTypes, PropType } from 'vue'
import { computed, ref, VNode } from 'vue'
import { setColorVolume } from '@/utils/useColors'
import ColorName from '@/types/colors'
import { UBadge } from '@/components/UBadge'

export const makeUTabItemProps = propsFactory(
  {
    title: {
      type: String,
      default: 'My details',
      required: false,
    },
    badge: {
      type: [String, undefined] as PropType<string | undefined>,
      default: undefined,
      required: false,
    },
    active: {
      type: Boolean,
      default: false,
      required: false,
    },
    link: {
      type: String,
      required: false,
    },
    variant: {
      type: String,
      default: 'button',
      required: false,
    },
    size: {
      type: String,
      default: 'sm',
      required: false,
    },
    underlinedType: {
      type: String,
      required: false,
    },
    buttonType: {
      type: String,
      default: 'primary',
      required: false,
    },
    fullWidth: {
      type: Boolean,
      required: false,
    },

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

export type UTabItemProps = ExtractPropTypes<typeof makeUTabItemProps>

export type UTabItemSlots = {
  //
}

export const UTabItem = genericComponent<UTabItemSlots>()({
  name: 'UTabItem',

  props: makeUTabItemProps(),

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

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

    const itemRef = ref<VNode>()

    const BgButtonClasses = computed(() => {
      return props.buttonType === 'primary' ? 'white' : 'transparent'
    })

    const textButtonNames = computed(() => {
      return props.buttonType === 'primary'
        ? ('primary' as ColorName)
        : ('gray' as ColorName)
    })

    const shadowButtonClasses = computed(() => {
      let shadow = ''
      if (props.buttonType === 'primary') {
        shadow = 'active:shadow-xs-btn active:shadow-primary-100'
      } else if (props.buttonType === 'white') {
        shadow = 'hover:shadow-sm active:shadow-transparent'
      }
      return shadow
    })

    const shadowActiveButtonClasses = computed(() => {
      let shadow = ''
      if (props.buttonType === 'primary') {
        shadow = 'active:shadow-xs-btn active:shadow-primary-100'
      } else if (props.buttonType === 'white') {
        shadow = 'shadow-sm'
      } else if (props.buttonType === 'gray') {
        shadow = 'active:shadow-sm'
      }
      return shadow
    })

    const buttonBadgeClasses = computed(() => {
      let color = ''
      if (
        (props.variant === 'button' &&
          props.buttonType === 'primary' &&
          props.active) ||
        (props.variant === 'button' &&
          props.buttonType === 'primary' &&
          !props.active &&
          isHovered.value)
      ) {
        color = 'primary'
      } else {
        color = 'gray'
      }
      return color
    })

    const underlinedBadgeClasses = computed(() => {
      let color = ''
      if (
        (props.variant === 'underlined' && props.active) ||
        (props.variant === 'underlined' &&
          !props.active &&
          isHovered.value &&
          !isActive.value)
      ) {
        color = 'primary'
      } else {
        color = 'gray'
      }
      return color
    })

    const classes = computed(() => ({
      ['h-fit font-semibold flex justify-center items-center gap-2']: true,
      ['w-fit py-2 px-3 text-text-sm']: props.size === 'sm' && !props.fullWidth,
      ['w-fit py-2.5 px-3.5 text-text-md']:
        props.size === 'md' && !props.fullWidth,
      ['py-2 w-fit text-text-sm']: props.size === 'sm' && props.fullWidth,
      ['py-2.5 w-fit text-text-md']: props.size === 'md' && props.fullWidth,
    }))

    const buttonClasses = computed(() => ({
      ['rounded-md']: true,
      [`bg-transparent hover:bg-${setColorVolume(
        props.buttonType as ColorName,
        50
      )} active:bg-${
        BgButtonClasses.value
      } text-gray-500 hover:text-${setColorVolume(
        textButtonNames.value,
        700
      )} active:text-gray-500 ${shadowButtonClasses.value}`]: !props.active,
      [`bg-${setColorVolume(
        props.buttonType as ColorName,
        50
      )} text-${setColorVolume(textButtonNames.value, 700)} ${
        shadowActiveButtonClasses.value
      }`]: props.active,
    }))

    const underlinedClasses = computed(() => ({
      [`text-gray-500 hover:text-primary-700 active:text-gray-500`]:
        !props.active,
      ['text-primary-700 ']: props.active,
      ['bg-transparent hover:bg-primary-50 active:bg-transparent']:
        props.active && props.underlinedType === 'underline filled',
    }))

    const onClick = (evt: MouseEvent) => {
      emit('click', evt)
    }

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

    const switchActive = () => {
      isActive.value = !isActive.value
    }

    return () => (
      <div
        class={[
          props.fullWidth ? 'w-full flex justify-center' : 'w-fit',
          'cursor-pointer',
        ]}
        ref={itemRef}
        onMouseenter={switchHover}
        onMouseleave={switchHover}
        onMousedown={switchActive}
        onMouseup={switchActive}
        onClick={onClick}
      >
        {props.variant === 'button' && !props.link ? (
          <div class={[classes.value, buttonClasses.value]}>
            {!props.link ? <span>{props.title}</span> : null}
            {props.badge !== undefined ? (
              <UBadge size={props.size} color={buttonBadgeClasses.value}>
                {props.badge}
              </UBadge>
            ) : null}
          </div>
        ) : null}
        {props.variant === 'underlined' && !props.link ? (
          <div class={[classes.value, underlinedClasses.value]}>
            {!props.link ? <span>{props.title}</span> : null}
            {props.badge !== undefined ? (
              <UBadge
                size={props.size}
                color={underlinedBadgeClasses.value}
                class="relative"
              >
                {props.badge}
              </UBadge>
            ) : null}
          </div>
        ) : null}
        {props.link ? (
          <router-link to={props.link}>
            {props.variant === 'button' ? (
              <div class={[classes.value, buttonClasses.value]}>
                <span>{props.title}</span>
                {props.badge !== undefined ? (
                  <UBadge size={props.size} color={buttonBadgeClasses.value}>
                    {props.badge}
                  </UBadge>
                ) : null}
              </div>
            ) : null}
            {props.variant === 'underlined' ? (
              <div class={[classes.value, underlinedClasses.value]}>
                {!props.link ? <span>{props.title}</span> : null}
                {props.badge !== undefined ? (
                  <UBadge
                    size={props.size}
                    color={underlinedBadgeClasses.value}
                    class="relative"
                  >
                    {props.badge}
                  </UBadge>
                ) : null}
              </div>
            ) : null}
          </router-link>
        ) : null}
      </div>
    )
  },
})

export type UTabItem = InstanceType<typeof UTabItem>