import { ref } from 'vue'
import DefaultInput from './default-input'

export default {
  title: 'The Design system/Default input',
  tags: ['autodocs'],
  component: DefaultInput,
  args: {
    isRequired: false,
    isDisabled: false,
    isWithCopy: false,
    isForNumber: false,
    isForPassword: false,
    isShowTooltip: false,
    isResettable: false,
    label: 'Label text',
    description: 'Для проверки ошибок см вкладку вверху Docs => Description',
    placeholder: 'Placeholder text',
    errors: [] || '',
  },
}

const modelValue = ref('')
const modelValue2 = ref('')

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div style="max-width: 230px">
        <DefaultInput
          {...args }
          modelValue={modelValue.value}
          onValueChange={(v) => { modelValue.value = v }}
        />

        <div style={{ marginTop: '40px' }}>
          <DefaultInput
            label='Число'
            placeholder='Для ввода целых чисел'
            isForNumber={true}
            modelValue={modelValue2.value}
            onValueChange={(v) => { modelValue2.value = v }}
            mask={(v) => Number(v).toFixed()}
          />
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})