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

export default {
  title: 'The Design system/Radio',
  component: RadioButton,
  tags: ['autodocs'],
  args: {
    isDisabled: false,
    modelValue: false,
    onValueChange: undefined,
  },
}

const value = ref(true)

const Template = (args: any) => ({
  props: Object.keys(args),
  render() {
    return (
      <div>
        <p style="font-size: 14px; line-height: 16px; color: #27282E; margin: 10px 0 14px;">Радиокнопка</p>
        <div style="display: flex; gap: 20px;">
          <RadioButton
            { ...args }
            text="Да"
            modelValue={value.value}
            onValueChange={() => { value.value = true }}
          />
          <RadioButton
            { ...args }
            text="Нет"
            modelValue={!value.value}
            onValueChange={() => { value.value = false }}
          />
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})