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

import { RadioButton } from '../src';

storiesOf("RadioButton", module).add("Primary", () => {
  function Parent({ children }) {
    const [state, setState] = useState({
      value: 'test-id',
      selected: 'other-id',
    });

    return <div>{children(state, setState)}</div>;
  }

  return (
    <Parent>
      {(state, setState) => (
        <RadioButton
          value={state.value}
          isReadOnly={false}
          selected={state.selected}
          onChange={(value) => {
            if (value === state.selected) {
              setState({ value: state.value, selected: 'other-id' })
            } else {
              setState({ value: state.value, selected: state.value })
            }
          }}
        />
      )}
    </Parent>
  );
});

storiesOf("RadioButton", module).add("Small", () => {
  function Parent({ children }) {
    const [state, setState] = useState({
      value: 'test-id',
      selected: 'other-id',
    });

    return <div>{children(state, setState)}</div>;
  }

  return (
    <Parent>
      {(state, setState) => (
        <RadioButton
          value={state.value}
          isReadOnly={false}
          size={'small'}
          selected={state.selected}
          onChange={(value) => {
            if (value === state.selected) {
              setState({ value: state.value, selected: 'other-id' })
            } else {
              setState({ value: state.value, selected: state.value })
            }
          }}
        />
      )}
    </Parent>
  );
});

storiesOf("RadioButton", module).add("ReadOnly", () =>
  <RadioButton
    value={'test-id'}
    isReadOnly={true}
    selected={'test-id'}
  />
);