import { ref } from 'vue'
import NumberRange from './NumberRange.vue'

export default {
  title: 'The Design system/NumberRange',
  component: NumberRange,
  tags: ['autodocs'],
  args: {
    label: 'Number range',
  },
  argTypes: {
    appearance: {
      description: 'Для таблицы/Для фильтрбара',
      control: { type: 'radio' },
      options: ['filter', 'form'],
      defaultValue: 'filter',
    },
  },
}

const model = ref({ from: undefined, to: undefined })
const addValue = (value) => { model.value = value }
const removeValues = () => { model.value = { from: undefined, to: undefined } }

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div class='ark-storybook' style={{ maxWidth: '600px' }}>
        <NumberRange {...args} modelValue={model.value} addValue={addValue} removeValues={removeValues} />
      </div>
    )
  },
})

export const Primary = Template.bind({})