// @flow
import React, { useState, useCallback } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { SegmentedControl } from './index';
import { SegmentedControlItem } from './segmented-control-item/index';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './SEGMENTED_CONTROL.mkd';

const SegmentedControlDemo = () => {
  const [activeOption, setActiveOption] = useState('2');
  const onOptionChanged = useCallback(value => {
    setActiveOption(value);
    action('Setting active option')(value);
  }, []);

  return (
    <SegmentedControl value={activeOption} onChange={onOptionChanged}>
      <SegmentedControlItem value="1">Label 1</SegmentedControlItem>
      <SegmentedControlItem value="2">Label 2</SegmentedControlItem>
      <SegmentedControlItem value="3">Label 3</SegmentedControlItem>
      <SegmentedControlItem value="4">Label 4</SegmentedControlItem>
    </SegmentedControl>
  );
};

storiesOf('Core/Navigation/SegmentedControl', module)
  .addDecorator(withInfo(configDocs(docs, SegmentedControl)))
  .add('normal', () => <SegmentedControlDemo />);
