import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ExtractPropTypes, PropType, computed } from 'vue'
import { UIcon, UTooltip } from '../../components'
import type ColorName from '../../types/colors'

export const makeUTableHeaderTextProps = propsFactory(
  {
    prependIcon: {
      type: [String, undefined] as PropType<string | undefined>,
      default: undefined,
      required: false,
    },
    appendIcon: {
      type: [String, undefined] as PropType<string | undefined>,
      default: undefined,
      required: false,
    },
    isHovered: {
      type: Boolean,
      default: false,
      required: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'UTableHeaderText'
)

export type UTableHeaderTextProps = ExtractPropTypes<
  typeof makeUTableHeaderTextProps
>

export type UTableHeaderTextSlots = {
  default: never
}

export const UTableHeaderText = genericComponent<UTableHeaderTextSlots>()({
  name: 'UTableHeaderText',

  props: makeUTableHeaderTextProps(),

  emits: {
    //
  },

  setup(props, { emit, slots }) {
    const textColorClasses = computed(() => {
      let color = 'text-gray-600'
      if (props.isHovered) {
        color = 'text-gray-700'
      } else if (props.isDisabled) {
        color = 'text-gray-300'
      }
      return color
    })

    const iconColorClasses = computed(() => {
      let color = 'gray-600'
      if (props.isDisabled) {
        color = 'gray-300'
      }
      return color as ColorName
    })

    return () => (
      <div class="flex items-center">
        <span
          class={[
            textColorClasses.value,
            `overflow-hidden whitespace-nowrap overflow-ellipsis text-text-xs font-medium w-fit 
            h-fit`,
          ]}
        >
          {slots.default?.()}
        </span>
        {props.prependIcon ? (
          <div class="pl-2 flex justify-center items-center">
            <UTooltip position="bottom" theme="light">
              {{
                tooltipToggle: () => (
                  <UIcon
                    color="gray-400"
                    size="14"
                    icon={props.prependIcon}
                  ></UIcon>
                ),
                text: () =>
                  `Tooltips are used to describe or identify an element. In most scenarios, 
                  tooltips help the user understand meaning, function, or alt-text.`,
              }}
            </UTooltip>
          </div>
        ) : null}
        {props.appendIcon ? (
          <div class="pl-2">
            <UIcon
              size="14"
              color={iconColorClasses.value}
              icon={props.appendIcon}
            ></UIcon>
          </div>
        ) : null}
      </div>
    )
  },
})

export type UTableHeaderText = InstanceType<typeof UTableHeaderText>