import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ExtractPropTypes, PropType } from 'vue'
import { computed } from 'vue'
import { UInnerTagCheckbox } from './UInnerTagCheckbox'
import { UInnerTagClose } from './UInnerTagClose'
import { UInnerTagCount } from './UInnerTagCount'
import { UAvatar } from '..'
import Sizes from '@/types/sizes'

export const makeUTagProps = propsFactory(
  {
    size: {
      type: String,
      default: 'sm',
      required: false,
    },
    isChecked: {
      type: [Boolean, undefined] as PropType<boolean | undefined>,
      default: undefined,
      required: false,
    },
    closed: {
      type: Boolean,
      default: false,
      required: false,
    },
    count: {
      type: [Number, null] as PropType<number | null>,
      required: false,
    },
    avatarImagePath: {
      type: String,
      required: false,
    },
    avatarText: {
      type: String,
      required: false,
    },

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

export type UTagProps = ExtractPropTypes<typeof makeUTagProps>

export type UTagSlots = {
  default: never
}

export const UTag = genericComponent<UTagSlots>()({
  name: 'UTag',

  props: makeUTagProps(),

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

  setup(props, { emit, slots }) {
    const checkboxPaddingClasses = computed(() => ({
      ['pl-px']: props.size === 'sm',
      ['pr-px']: props.size === 'md',
      ['pl-px pr-0.5']: props.size === 'lg',
    }))

    const countPaddingClasses = computed(() => ({
      ['']: props.size === 'sm',
      ['ml-px']: props.size === 'md',
      ['ml-0.5']: props.size === 'lg',
    }))

    const avatarPaddingClasses = computed(() => {
      let margin = ''
      if (props.size === 'sm' && props.isChecked === undefined) {
        margin = ''
      } else if (props.size === 'md' && props.isChecked === undefined) {
        margin = 'pl-px pr-px'
      } else if (props.size === 'lg' && props.isChecked === undefined) {
        margin = 'pl-0.6 pr-0.5'
      } else if (
        (props.size === 'sm' || props.size === 'md' || props.size === 'lg') &&
        props.isChecked !== undefined
      ) {
        margin = 'pl-1'
      }
      return margin
    })

    const labelPaddingClasses = computed(() => {
      return props.closed ? 'px-1' : 'pl-1 pr-0.6'
    })

    const fontSizeClasses = computed(() => {
      let sizes = ''
      if (props.size === 'sm') {
        sizes = 'text-text-xs'
      } else if (props.size === 'md') {
        sizes = 'text-text-sm'
      } else if (props.size === 'lg') {
        sizes = 'text-text-sm'
      }
      return sizes
    })

    const classes = computed(() => ({
      [`flex justify-center items-center border border-gray-300 w-fit rounded-md font-medium
      text-gray-700`]: true,
      [fontSizeClasses.value]: true,
      'px-1 py-0.6 max-h-6': props.size === 'sm',
      'px-1.3 py-0.5 max-h-6': props.size === 'md',
      'px-1.5 py-1 max-h-7': props.size === 'lg',
    }))

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

    const closeTag = (newValue: boolean) => {
      emit('delete', newValue)
    }

    return () => (
      <div class={classes.value}>
        {props.isChecked !== undefined ? (
          <UInnerTagCheckbox
            size={props.size}
            checkboxIsChecked={props.isChecked}
            class={checkboxPaddingClasses}
            onChange={switchCheckbox}
          ></UInnerTagCheckbox>
        ) : null}
        <div>
          {props.avatarImagePath && !props.avatarText ? (
            <UAvatar
              class={avatarPaddingClasses.value}
              size={Sizes.xxs}
              imagePath={props.avatarImagePath}
              avatarIcon={null}
            ></UAvatar>
          ) : null}
          {props.avatarText && !props.avatarImagePath ? (
            <UAvatar
              class={avatarPaddingClasses.value}
              size={Sizes.xxs}
              avatarIcon={null}
            >
              {props.avatarText}
            </UAvatar>
          ) : null}
        </div>
        <div class={labelPaddingClasses.value}>{slots.default?.()}</div>
        <div
          class={
            props.closed && props.count ? 'flex items-center w-fit gap-1' : ''
          }
        >
          {props.count ? (
            <UInnerTagCount
              count={props.count}
              size={props.size}
              class={countPaddingClasses.value}
            ></UInnerTagCount>
          ) : null}
          {props.closed ? (
            <UInnerTagClose
              size={props.size}
              onDelete={closeTag}
            ></UInnerTagClose>
          ) : null}
        </div>
      </div>
    )
  },
})

export type UTag = InstanceType<typeof UTag>