// @flow
import React, { useState, useCallback } from 'react';
import { action } from '@storybook/addon-actions';
import { SegmentedControl } from './segmented-control.component';
import { SegmentedControlItem } from './segmented-control-item/index';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './segmented-control.mdx';

export default {
  component: SegmentedControl,
  title: 'Navigation/SegmentedControl',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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>
  );
};

export const Default = () => <SegmentedControlDemo />;

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker
    Component={SegmentedControl}
    value="1"
    onChange={action('onChange')}
  >
    <SegmentedControlItem value="1">Label 1</SegmentedControlItem>
    <SegmentedControlItem value="2">Label 2</SegmentedControlItem>
    <SegmentedControlItem value="3">Label 3</SegmentedControlItem>
  </MarginChecker>
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={SegmentedControl}
    value="1"
    onChange={action('onChange')}
  >
    <SegmentedControlItem value="1">Label 1</SegmentedControlItem>
  </StackeeChecker>
);
