import React, {useState} from 'react';
import {storiesOf} from '@storybook/react';

import CheckboxCardGroup from '../../Components/CheckboxCardGroup/src/index';
import checkboxItems from './mocks.js';

export default storiesOf('Components | CheckboxCardGroup', module)
  .add('CheckboxCardGroup', () => {
    const [options, changeOptions] = useState(checkboxItems);

    return (
      <CheckboxCardGroup
        options={options}
        onChange={(changedOption) => {
          const newOptions = options.map((option) => ({
            ...option,
            isChecked: (option.id === changedOption.id) ? changedOption.isChecked : option.isChecked,
          }));

          changeOptions(newOptions);
        }}
      />
    );
  });