import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import { IconInfoBadgedSmallFilled } from '@teamleader/ui-icons';
import Toggle from './Toggle';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import Box from '../box';
import Tooltip from '../tooltip';
import Icon from '../icon';
import { TextSmall } from '../typography';
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: 'I am a label'
};
var TooltippedIcon = Tooltip(Icon);
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, {
    checked: checked,
    onChange: handleChange,
    label: /*#__PURE__*/React.createElement(Box, {
      display: "flex"
    }, "Label", /*#__PURE__*/React.createElement(TooltippedIcon, {
      tooltip: /*#__PURE__*/React.createElement(TextSmall, null, "Tooltip"),
      marginLeft: 2
    }, /*#__PURE__*/React.createElement(IconInfoBadgedSmallFilled, null)))
  });
};