import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import ContentSwitcher from './ContentSwitcher';
import markdown from './README.mdx';
import Switch from '../Switch';
import { Add16, AddCircleGlyph } from '@wfp/icons-react';
export default {
  title: 'Components/Content Related/ContentSwitcher',
  component: ContentSwitcher,
  subcomponents: {
    Switch: Switch
  },
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown
  }
};
export var Regular = function Regular(args) {
  var handleChange = function handleChange() {// console.log('handle any onChange here');
  };

  return /*#__PURE__*/React.createElement(ContentSwitcher, _extends({}, args, {
    onChange: handleChange
  }), /*#__PURE__*/React.createElement(Switch, {
    name: "one",
    text: "First section"
  }), /*#__PURE__*/React.createElement(Switch, {
    name: "two",
    text: "Second section"
  }), /*#__PURE__*/React.createElement(Switch, {
    name: "three",
    text: "Third section"
  }));
};
Regular.args = {
  children: 'ContentSwitcher'
};
export var ButtonSwitch = function ButtonSwitch(args) {
  var handleChange = function handleChange() {// console.log('handle any onChange here');
  };

  return /*#__PURE__*/React.createElement(ContentSwitcher, _extends({}, args, {
    onChange: handleChange
  }), /*#__PURE__*/React.createElement(Switch, {
    kind: "button",
    name: "one",
    text: "First section"
  }), /*#__PURE__*/React.createElement(Switch, {
    kind: "button",
    name: "two",
    text: "Second section"
  }), /*#__PURE__*/React.createElement(Switch, {
    kind: "button",
    name: "three",
    text: "Third section"
  }));
};
ButtonSwitch.args = {
  children: 'ContentSwitcher'
};
var description = "\n\n#### Default types of switch state\n\n| kind   |  Description  |\n|----------|-------------|\n| `anchor` | (Default) |\n| `button` | experimental   |\n";
ButtonSwitch.story = {
  parameters: {
    docs: {
      storyDescription: description
    }
  }
};
/*
export const withIcon = (args) => {
  const handleChange = () => {
    // console.log('handle any onChange here');
  };
  return (
    <ContentSwitcher {...args} onChange={handleChange}>
      <Switch kind="button" name="one" text="First section" icon={AddCircleGlyph} />
      <Switch kind="button" name="two" text="Second section" icon={AddCircleGlyph} />
      <Switch kind="button" name="three" text="Third section" icon={AddCircleGlyph} />
    </ContentSwitcher>
  );
};

withIcon.args = {
  children: 'ContentSwitcher',
};

const desc = `Specify icon to be used in the switch element. \`icon\` property on \`<switch/>\` expects an element `;

withIcon.story = {
  parameters: {
    docs: {
      storyDescription: desc,
    },
  },
};
*/