<script lang="ts" setup>
import AInput from '#adata-ui/components/forms/input/standard/AInputStandard.vue'
import AButton from '#adata-ui/components/elements/button/AButton.vue'

interface Props {
  disabled?: boolean
  label?: string
  size?: 'sm' | 'md'
  error?: string
  required?: boolean
  loading?: boolean

  buttonView?: 'default' | 'outline' | 'transparent'
  buttonType?: 'primary' | 'success' | 'danger' | 'gray' | 'ghost'
  buttonForm?: 'icon' | 'button'
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  label: '',
  size: 'md',
  error: '',
  required: false,
  loading: false,
  buttonView: 'default',
  buttonType: 'primary',
  buttonForm: 'button'
})
</script>

<template>
  <a-input
    v-bind="$attrs"
    v-bind.prop="props"
  >
    <template #endButton>
      <div class="pointer-events-click absolute right-1 top-1/2 translate-y-[-50%] transform fill-gray-500 text-gray-500 hover:opacity-80 disabled:pointer-events-none">
        <a-button
          :class="size === 'sm' ? 'h-6 pt-px' : 'h-8'"
          :loading="loading"
          :type="buttonType"
          :view="buttonView"
          :size="size"
          :form="buttonForm"
        >
          <slot name="button-content" />
        </a-button>
      </div>
    </template>
  </a-input>
</template>

<style scoped></style>
