import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import Toggle from './Toggle';
var LABEL = 'I am a label';
var LABEL_TOOLTIP = 'I am label tooltip';
export default {
  component: Toggle,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Form elements/Toggle'),
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=6454%3A23548'
    }
  }
};
export var DefaultStory = function DefaultStory(args) {
  var _useState = useState(args.checked),
      _useState2 = _slicedToArray(_useState, 2),
      checked = _useState2[0],
      setChecked = _useState2[1];

  var handleChange = function handleChange(event) {
    setChecked(event.currentTarget.checked);
  };

  return /*#__PURE__*/React.createElement(Toggle, _extends({}, args, {
    checked: checked,
    onChange: handleChange
  }));
};
DefaultStory.args = {
  checked: true,
  label: LABEL
};
DefaultStory.argTypes = {
  label: {
    control: 'text'
  },
  labelTooltip: {
    control: 'text'
  }
};
export var withTooltip = function withTooltip() {
  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      checked = _useState4[0],
      setChecked = _useState4[1];

  var handleChange = function handleChange(event) {
    setChecked(event.currentTarget.checked);
  };

  return /*#__PURE__*/React.createElement(Toggle, {
    label: LABEL,
    tooltip: LABEL_TOOLTIP,
    checked: checked,
    onChange: handleChange
  });
};
export var withTooltipRight = function withTooltipRight() {
  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      checked = _useState6[0],
      setChecked = _useState6[1];

  var handleChange = function handleChange(event) {
    setChecked(event.currentTarget.checked);
  };

  return /*#__PURE__*/React.createElement(Toggle, {
    label: LABEL,
    tooltip: LABEL_TOOLTIP,
    tooltipPosition: "right",
    checked: checked,
    onChange: handleChange
  });
};
export var disabled = function disabled() {
  return /*#__PURE__*/React.createElement(Toggle, {
    label: LABEL,
    disabled: true,
    checked: false
  });
};
export var small = function small() {
  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      checked = _useState8[0],
      setChecked = _useState8[1];

  var handleChange = function handleChange(event) {
    setChecked(event.currentTarget.checked);
  };

  return /*#__PURE__*/React.createElement(Toggle, {
    label: LABEL,
    maxLines: 1,
    checked: checked,
    onChange: handleChange,
    size: "small"
  });
};
export var medium = function medium() {
  var _useState9 = useState(false),
      _useState10 = _slicedToArray(_useState9, 2),
      checked = _useState10[0],
      setChecked = _useState10[1];

  var handleChange = function handleChange(event) {
    setChecked(event.currentTarget.checked);
  };

  return /*#__PURE__*/React.createElement(Toggle, {
    label: LABEL,
    maxLines: 1,
    checked: checked,
    onChange: handleChange,
    size: "medium"
  });
};
export var large = function large() {
  var _useState11 = useState(false),
      _useState12 = _slicedToArray(_useState11, 2),
      checked = _useState12[0],
      setChecked = _useState12[1];

  var handleChange = function handleChange(event) {
    setChecked(event.currentTarget.checked);
  };

  return /*#__PURE__*/React.createElement(Toggle, {
    label: LABEL,
    maxLines: 1,
    checked: checked,
    onChange: handleChange,
    size: "large"
  });
};