import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import markdown from './README.mdx';
import Checkbox from '.';
import InputGroup from '../InputGroup';
export default {
  title: 'Components/Forms/Checkbox',
  component: Checkbox,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(Checkbox, args);
};
Regular.args = {
  labelText: 'Label text',
  id: 'check-1'
};
var description = "\nYou can customize the content by using `BannerNavigation`.\n";
Regular.story = {
  parameters: {
    docs: {
      storyDescription: description
    }
  }
};
export var CheckedInput = function CheckedInput(args) {
  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      isChecked = _useState2[0],
      setChecked = _useState2[1];

  return /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    onChange: function onChange() {
      return setChecked(!isChecked);
    },
    checked: isChecked
  }));
};
CheckedInput.args = {
  labelText: 'Checked Input',
  id: 'check-2'
};
var check = "Specify whether the underlying input should be checked.";
CheckedInput.story = {
  parameters: {
    docs: {
      storyDescription: check
    }
  }
};
export var Indeterminate = function Indeterminate(args) {
  return /*#__PURE__*/React.createElement(Checkbox, args);
};
Indeterminate.args = {
  labelText: 'Indeterminate Input',
  indeterminate: true,
  id: 'check-3'
};
var indeterminate = "Is a state that is neither checked nor unchecked. It\u2019s that in-between state that we might consider the \u201CMaybe\u201D between \u201CYes\u201D and \u201CNo\u201D options";
Indeterminate.story = {
  parameters: {
    docs: {
      storyDescription: indeterminate
    }
  }
};
export var DisabledInput = function DisabledInput(args) {
  return /*#__PURE__*/React.createElement(Checkbox, args);
};
DisabledInput.args = {
  labelText: 'Disabled Input',
  disabled: true,
  id: 'check-4'
};
var disabled = "Specify whether the Checkbox should be interactive or not";
DisabledInput.story = {
  parameters: {
    docs: {
      storyDescription: disabled
    }
  }
};
export var HideLabel = function HideLabel(args) {
  return /*#__PURE__*/React.createElement(Checkbox, args);
};
HideLabel.args = {
  labelText: 'Hidden Label',
  hideLabel: true,
  id: 'check-5'
};
var nolabel = "Specify whether the label should be hidden or not";
HideLabel.story = {
  parameters: {
    docs: {
      storyDescription: nolabel
    }
  }
};
export var VerticalGrouping = function VerticalGrouping(args) {
  return /*#__PURE__*/React.createElement(InputGroup, {
    helperText: "select any that apply",
    labelText: "Programming language preference",
    vertical: true
  }, /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    defaultChecked: true,
    labelText: "ReactJs",
    id: "react"
  })), /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    defaultChecked: true,
    labelText: "ReactNative",
    id: "native"
  })), /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    labelText: "Node.js",
    id: "node"
  })), /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    labelText: "PHP",
    id: "php"
  })), /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    labelText: "Java",
    id: "java"
  })));
};
VerticalGrouping.args = {}; // const nolabel = `Specify whether the label should be hidden or not`;
// CheckboxGroup.story = {
//   parameters: {
//     docs: {
//       storyDescription: nolabel,
//     },
//   },
// };

export var HorizontalGrouping = function HorizontalGrouping(args) {
  return /*#__PURE__*/React.createElement(InputGroup, {
    helperText: "select any that apply",
    labelText: "Programming language preference"
  }, /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    defaultChecked: true,
    labelText: "ReactJs",
    id: "react1"
  })), /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    defaultChecked: true,
    labelText: "ReactNative",
    id: "native1"
  })), /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    labelText: "Node.js",
    id: "node1"
  })), /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    defaultChecked: true,
    labelText: "PHP",
    id: "php1"
  })), /*#__PURE__*/React.createElement(Checkbox, _extends({}, args, {
    labelText: "Java",
    id: "java1"
  })));
};
HorizontalGrouping.args = {};