import type { PropType } from 'vue'
import { computed, defineComponent, ref } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
import Icon from '../icon'

export default defineComponent({
  name: 'Input',
  props: {
    modelValue: String,
    size: {
      type: String as PropType<'small' | 'medium' | 'large'>,
      default: 'medium',
    },
    align: {
      type: String as PropType<'left' | 'center' | 'right'>,
      default: 'left',
    },
    placeholder: String,
    disabled: Boolean,
    readonly: Boolean,
    clearable: Boolean,
    prefixIcon: String,
    suffixIcon: String,
    showCount: Boolean,
    maxlength: Number,
    password: Boolean,
    prepend: String,
    append: String,
  },
  emits: ['update:modelValue'],
  setup(props, { slots, emit }) {
    const prefixCls = getPrefixCls('input')
    const inputValue = ref(props.modelValue || '')

    // 控制密码显示/隐藏
    const showPassword = ref(false)

    const updateValue = (val: string) => {
      if (props.maxlength)
        val = val.slice(0, props.maxlength)
      inputValue.value = val
      emit('update:modelValue', val)
    }

    const countText = computed(() => {
      const len = inputValue.value.length
      return props.maxlength ? `${len} / ${props.maxlength}` : `${len}`
    })

    const inputType = computed(() => {
      if (!props.password)
        return 'text'
      return showPassword.value ? 'text' : 'password'
    })

    const inputWrapper = () => {
      return (
        <div
          class={[
            `${prefixCls}-wrapper`,
            props.disabled && `${prefixCls}-disabled`,
            props.readonly && `${prefixCls}-readonly`,
          ]}
        >
          {(slots.prefix || props.prefixIcon) && (
            <div class={`${prefixCls}-prefix`}>
              {slots.prefix?.() ?? <Icon icon={props.prefixIcon!} size={14} />}
            </div>
          )}

          <input
            class={`${prefixCls}-input ${prefixCls}-align-${props.align}`}
            type={inputType.value}
            value={inputValue.value}
            placeholder={props.placeholder}
            disabled={props.disabled}
            readonly={props.readonly}
            onInput={(e: Event) => updateValue((e.target as HTMLInputElement).value)}
          />

          {props.clearable && inputValue.value && !props.disabled && !props.readonly && (
            <span
              class={`${prefixCls}-suffix`}
              onClick={() => updateValue('')}
            >
              <Icon
                class={`${prefixCls}-clear`}
                icon="material-symbols:cancel-outline-rounded"
              />
            </span>

          )}

          {/* 密码切换图标 */}
          {props.password && (
            <span
              class={`${prefixCls}-suffix`}
              onClick={() => (showPassword.value = !showPassword.value)}
            >
              <Icon icon={showPassword.value ? 'mage:eye-off' : 'mage:eye'} class={`${prefixCls}-password`} />
            </span>
          )}

          {(slots.suffix || props.suffixIcon) && !props.password && (
            <div class={`${prefixCls}-suffix`}>
              {slots.suffix?.() ?? <Icon icon={props.suffixIcon!} size={14} />}
            </div>
          )}

          {props.showCount && (
            <span class={`${prefixCls}-count`}>{countText.value}</span>
          )}
        </div>
      )
    }

    return () => {
      return (
        <div class={`${prefixCls}-adornment ${prefixCls}-size-${props.size}`}>
          {props.prepend || slots.prepend
            ? (
                <div class={`${prefixCls}-adornment-prepend`}>
                  {slots.prepend?.() ?? (props.prepend && <span>{props.prepend}</span>)}
                </div>
              )
            : null}

          {inputWrapper()}

          {props.append || slots.append
            ? (
                <div class={`${prefixCls}-adornment-append`}>
                  {slots.append?.() ?? (props.append && <span>{props.append}</span>)}
                </div>
              )
            : null}
        </div>
      )
    }
  },
})