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

export const makeUInnerTagCloseProps = propsFactory(
  {
    size: {
      type: String,
      default: 'sm',
      required: false,
    },

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

export type UInnerTagCloseProps = ExtractPropTypes<
  typeof makeUInnerTagCloseProps
>

export type UInnerTagCloseSlots = {
  //
}

export const UInnerTagClose = genericComponent<UInnerTagCloseSlots>()({
  name: 'UInnerTagClose',

  props: makeUInnerTagCloseProps(),

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

  setup(props, { emit }) {
    const size = computed(() => {
      let sizes = ''
      if (props.size === 'sm') {
        sizes = 'h-3.5 w-3.5'
      } else if (props.size === 'md') {
        sizes = 'h-4.5 w-4'
      } else if (props.size === 'lg') {
        sizes = 'h-5.5 w-5'
      }

      return sizes
    })

    const tagClasses = computed<string>(
      () =>
        `bg-white hover:bg-gray-100 active:bg-white cursor-pointer rounded-3 ${size.value} flex 
          justify-center items-center`
    )

    const close = () => {
      emit('delete', true)
    }

    return () => (
      <div class="flex justify-center" onClick={close}>
        <div class={tagClasses.value}>
          {props.size === 'lg' ? (
            <svg
              width="10"
              height="10"
              viewBox="0 0 10 10"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8.5 1.5L1.5 8.5M1.5 1.5L8.5 8.5"
                stroke="#98A2B3"
                stroke-width="1.66667"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          ) : null}
          {props.size === 'md' ? (
            <svg
              width="8"
              height="8"
              viewBox="0 0 8 8"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M7 1L1 7M1 1L7 7"
                stroke="#98A2B3"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          ) : null}
          {props.size === 'sm' ? (
            <svg
              width="8"
              height="8"
              viewBox="0 0 8 8"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6.5 1.5L1.5 6.5M1.5 1.5L6.5 6.5"
                stroke="#98A2B3"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          ) : null}
        </div>
      </div>
    )
  },
})

export type UInnerTagClose = InstanceType<typeof UInnerTagClose>