import React from 'react';
import { Alert } from '../Alert';
import ChoiceList from './ChoiceList';
import Choice from './Choice';
export default {
  title: 'Components/ChoiceList',
  component: ChoiceList,
  argTypes: {
    choices: {
      control: false
    }
  },
  args: {
    choices: [{
      label: 'Choice 1',
      value: 'A',
      defaultChecked: true,
      inputRef: function inputRef() {
        console.log('I am a ref callback being called!');
      }
    }, {
      label: 'Choice 2',
      requirementLabel: 'Choice hint text',
      value: 'B'
    }, {
      label: 'Disabled choice 3',
      value: 'C',
      disabled: true
    }]
  },
  subcomponents: {
    Alert: Alert,
    Choice: Choice
  }
};

var Template = function Template(args) {
  return /*#__PURE__*/React.createElement(ChoiceList, args);
};

export var DefaultCheckbox = Template.bind({});
DefaultCheckbox.args = {
  label: 'Checkbox example',
  hint: 'Helpful hint text',
  name: 'checkbox_choices',
  type: 'checkbox'
};
export var DefaultRadio = Template.bind({});
DefaultRadio.args = {
  errorMessage: 'Example error message',
  label: 'Radio example',
  name: 'radio_choices',
  type: 'radio'
};
export var SmallOption = Template.bind({});
SmallOption.args = {
  label: 'Small size example',
  name: 'size-variants',
  type: 'radio',
  size: 'small'
};
export var InverseOption = Template.bind({});
InverseOption.args = {
  label: 'Inverse example',
  errorMessage: 'Example error message',
  hint: 'Helpful hint text',
  name: 'inverse_choices_field',
  type: 'checkbox',
  inversed: true
};
InverseOption.parameters = {
  backgrounds: {
    default: process.env.STORYBOOK_DS === 'medicare' ? 'Mgov dark' : 'Hcgov dark'
  }
};
export var ChoiceChildren = Template.bind({});
ChoiceChildren.args = {
  name: 'radio_choices',
  type: 'radio',
  choices: [{
    label: 'Choice 1',
    value: 'A',
    defaultChecked: true,
    checkedChildren: /*#__PURE__*/React.createElement(Alert, {
      heading: "You'll save more with this option"
    }, "Based on the household information you provided, this option will give you the maximum savings. We are adding some filler text just to show what it looks like when you have a long alert as the checkedChildren of a Choice component.")
  }, {
    label: 'Choice 2',
    requirementLabel: 'Choice hint text',
    value: 'B',
    checkedChildren: /*#__PURE__*/React.createElement(Alert, {
      variation: "warn",
      heading: "Are you sure?"
    }, "Based on the household information you provided, you can actually save more with the other option. You are free to change this at any point during the application process until you have signed and submitted your final application.")
  }]
};