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

export const makeUInnerTagCheckboxProps = propsFactory(
  {
    size: {
      type: String,
      default: 'sm',
      required: false,
    },
    checkboxIsChecked: {
      type: Boolean,
      default: false,
      required: false,
    },
    checkboxIsDisabled: {
      type: Boolean,
      default: false,
      required: false,
    },

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

export type UInnerTagCheckboxProps = ExtractPropTypes<
  typeof makeUInnerTagCheckboxProps
>

export type UInnerTagCheckboxSlots = {
  //
}

export const UInnerTagCheckbox = genericComponent<UInnerTagCheckboxSlots>()({
  name: 'UInnerTagCheckbox',

  props: makeUInnerTagCheckboxProps(),

  /* emits: {
    change: (e: MouseEvent) => true,
  }, */
  emits: {
    change: (value: boolean) => true,
  },

  setup(props, { emit }) {
    const backgroundColor = computed(() => {
      let backgroundColor = 'white'
      if (!props.checkboxIsChecked && !props.checkboxIsDisabled) {
        backgroundColor = `bg-white hover:bg-primary-100 active:bg-white active:shadow-xs-btn 
          active:shadow-primary-100`
      } else if (props.checkboxIsChecked && !props.checkboxIsDisabled) {
        backgroundColor = `bg-primary-600 hover:bg-primary-700 active:bg-primary-600
            active:shadow-xs-btn active:shadow-primary-100`
      } else if (!props.checkboxIsChecked && props.checkboxIsDisabled) {
        backgroundColor = 'bg-gray-100 border border-gray-200'
      } else if (props.checkboxIsChecked && props.checkboxIsDisabled) {
        backgroundColor = `bg-gray-200 border border-gray-200`
      }
      return backgroundColor
    })

    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-4.8 w-4.5'
      }

      return sizes
    })

    const tagClasses = computed<string>(
      () =>
        `${backgroundColor.value} cursor-pointer rounded-3 ${size.value} flex justify-center
            items-center`
    )
    const switchValue = ref(true)

    const switchCheckbox = () => {
      switchValue.value = !switchValue.value
      emit('change', switchValue.value)
    }

    return () => (
      <div class="flex justify-center" onClick={switchCheckbox}>
        <div
          class={[
            !props.checkboxIsChecked && !props.checkboxIsDisabled
              ? 'border border-gray-300 hover:border-primary-600 active:border-primary-300'
              : '',
            props.checkboxIsChecked && !props.checkboxIsDisabled
              ? 'border border-primary-600 hover:border-primary-700 active:border-primary-600'
              : '',
            tagClasses.value,
          ]}
        >
          {props.size === 'lg' && props.checkboxIsChecked ? (
            <svg
              width="12"
              height="9"
              viewBox="0 0 12 9"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M10.6667 1.5L4.25004 7.91667L1.33337 5"
                stroke="white"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          ) : null}
          {props.size === 'md' && props.checkboxIsChecked ? (
            <svg
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M10 3L4.5 8.5L2 6"
                stroke="white"
                stroke-width="1.71429"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          ) : null}
          {props.size === 'sm' && props.checkboxIsChecked ? (
            <svg
              width="10"
              height="10"
              viewBox="0 0 10 10"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8.33341 2.5L3.75008 7.08333L1.66675 5"
                stroke="white"
                stroke-width="1.66667"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          ) : null}
        </div>
      </div>
    )
  },
})

export type UInnerTagCheckbox = InstanceType<typeof UInnerTagCheckbox>