import { defineComponent, computed } from 'vue'

const Switch = defineComponent({
  name: 'u-switch',
  props: {
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['small', 'medium', 'large']
      },
    },
    checked: {
      type: [Boolean, String, Number],
      default: false,
    },
    checkedValue: {
      type: [Boolean, String, Number],
      default: true,
    },
    uncheckedValue: {
      type: [Boolean, String, Number],
      default: false,
    },
  },
  emits: ['update:checked', 'change'],
  setup(props, { emit }) {
    const switchSize = computed(() => {
      return 'u-switch-size-' + props.size
    })
    const isChecked = computed(() => {
      return props.checked == props.checkedValue ? 'u-switch-checked' : ''
    })
    const onClick = (e) => {
      console.log(
        'value:',
        props.checked,
        props.uncheckedValue,
        props.checkedValue,
      )
      emit(
        'update:checked',
        props.checked == props.checkedValue
          ? props.uncheckedValue
          : props.checkedValue,
      )
      emit('change', e)
    }
    return () => (
      <div
        onClick={onClick}
        class={['u-switch', switchSize.value, isChecked.value]}
      >
        <div class={['u-switch-circle']}></div>
      </div>
    )
  },
})

export default Switch