import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ref, computed, PropType, ExtractPropTypes } from 'vue'
import { UTableHeaderText, UCheckbox } from '@/components'
import Sizes from '../../types/sizes'

export const makeUTableHeaderCellProps = propsFactory(
  {
    color: {
      type: String,
      default: 'white',
      required: false,
    },
    isChecked: {
      type: [Boolean, undefined] as PropType<boolean | undefined>,
      default: undefined,
      required: false,
    },
    isDisabled: {
      type: Boolean,
      required: false,
    },
    text: {
      type: String,
      default: '',
      required: false,
    },
    prependIcon: {
      type: [String, undefined] as PropType<string | undefined>,
      default: undefined,
      required: false,
    },
    appendIcon: {
      type: [String, undefined] as PropType<string | undefined>,
      default: undefined,
      required: false,
    },
    align: {
      type: String,
      required: false,
    },
    width: {
      type: String,
      required: false,
    },
    height: {
      type: String,
      default: '44',
      required: false,
    },

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

export type UTableHeaderCellProps = ExtractPropTypes<
  typeof makeUTableHeaderCellProps
>

export type UTableHeaderCellSlots = {
  default: never
}

export const UTableHeaderCell = genericComponent<UTableHeaderCellSlots>()({
  name: 'UTableHeaderCell',

  props: makeUTableHeaderCellProps(),

  emits: {
    change: (value: boolean) => true,
  },

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

    const alignClasses = computed(() => {
      let classes = ''
      if (props.align === 'left') {
        classes = 'justify-start'
      } else if (props.align === 'center') {
        classes = 'justify-center'
      } else {
        classes = 'justify-end'
      }
      return classes
    })

    const containerClasses = computed(() => ({
      [`flex ${alignClasses.value} items-center`]: true,
    }))

    const switchCheckbox = (newValue: boolean) => {
      emit('change', newValue)
    }

    return () => (
      <div
        class={'table-cell align-middle border-b border-gray-200'}
        style={`width: ${props.width}; height: ${props.height}px`}
      >
        <div
          class={[containerClasses.value, 'cursor-pointer px-4']}
          onMouseenter={() => (isHovered.value = true)}
          onMouseleave={() => (isHovered.value = false)}
        >
          {props.isChecked !== undefined ? (
            <span class={props.text ? 'pr-3' : ''}>
              <UCheckbox
                size={Sizes.md}
                checked={props.isChecked}
                onChange={switchCheckbox}
              ></UCheckbox>
            </span>
          ) : null}
          {props.text ? (
            <UTableHeaderText
              appendIcon={props.appendIcon}
              prependIcon={props.prependIcon}
              isHovered={isHovered.value}
              isDisabled={props.isDisabled}
            >
              {props.text}
            </UTableHeaderText>
          ) : null}
        </div>
      </div>
    )
  },
})

export type UTableHeaderCell = InstanceType<typeof UTableHeaderCell>