import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { useState } from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import Input from './Input';
import Button from '../button';
import Checkbox from '../checkbox';
import Icon from '../icon';
import { TextBody, TextSmall } from '../typography';
import Counter from '../counter';
import LoadingSpinner from '../loadingSpinner';
import { IconCalendarSmallOutline } from '@teamleader/ui-icons';
import NumericInput from './NumericInput';
import TimeInput from './TimeInput';
import DurationInput from './DurationInput';
import Textarea from './Textarea';
var placeholder = 'I am the placeholder';
var prefix = [
/*#__PURE__*/

/* eslint-disable-next-line react/jsx-key */
React.createElement(Icon, {
  color: "neutral",
  tint: "darkest"
}, /*#__PURE__*/React.createElement(IconCalendarSmallOutline, null)),
/*#__PURE__*/

/* eslint-disable-next-line react/jsx-key */
React.createElement(TextBody, {
  color: "neutral"
}, "\u20AC")];
/* eslint-disable-next-line react/jsx-key */

var suffix = [/*#__PURE__*/React.createElement(TextSmall, {
  key: "suffix1",
  color: "neutral"
}, "incl. BTW"), /*#__PURE__*/React.createElement(Counter, {
  key: "suffix2",
  count: 99,
  maxCount: 100,
  size: "medium"
}), /*#__PURE__*/React.createElement(LoadingSpinner, {
  key: "suffix3"
})];
var connectedLeft = /*#__PURE__*/React.createElement(Button, {
  size: "medium",
  label: "\u20AC"
});
var connectedRight = /*#__PURE__*/React.createElement(Button, {
  size: "medium"
}, /*#__PURE__*/React.createElement(Checkbox, {
  size: "small"
}, "Discount"));
var stepperOptions = ['none', 'connected', 'suffix'];
var sizes = ['small', 'medium', 'large'];
var types = ['text', 'button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'time', 'url', 'week'];
var inputArgTypes = {
  size: {
    control: 'select',
    options: ['tiny'].concat(sizes)
  }
};
export default {
  component: Input,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Form elements/Input'),
  argTypes: {
    value: {
      control: {
        type: 'text'
      }
    }
  }
};
export var input = function input(args) {
  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];

  var handleChange = function handleChange(event, value) {
    setValue(value);
  };

  return /*#__PURE__*/React.createElement(Input, _extends({
    value: value,
    onChange: handleChange
  }, args));
};
input.storyName = 'Input';
input.args = {
  bold: false,
  disabled: false,
  error: '',
  helpText: '',
  success: '',
  warning: '',
  inverse: false,
  placeholder: placeholder,
  readOnly: false,
  size: 'medium',
  type: 'text',
  textAlignRight: false,
  width: ''
};
input.argTypes = _objectSpread(_objectSpread({}, inputArgTypes), {}, {
  type: {
    control: 'select',
    options: types
  }
});
export var inputConnected = function inputConnected(args) {
  var _useState3 = useState(''),
      _useState4 = _slicedToArray(_useState3, 2),
      value = _useState4[0],
      setValue = _useState4[1];

  var handleChange = function handleChange(event, value) {
    setValue(value);
  };

  return /*#__PURE__*/React.createElement(Input, _extends({
    value: value,
    onChange: handleChange
  }, args));
};
inputConnected.storyName = 'Input with connected';
inputConnected.args = _objectSpread(_objectSpread({}, input.args), {}, {
  connectedLeft: connectedLeft,
  connectedRight: connectedRight
});
inputConnected.argTypes = _objectSpread(_objectSpread({}, inputArgTypes), {}, {
  type: {
    control: 'select',
    options: types
  }
});
export var inputPrefixSuffix = function inputPrefixSuffix(args) {
  var _useState5 = useState(''),
      _useState6 = _slicedToArray(_useState5, 2),
      value = _useState6[0],
      setValue = _useState6[1];

  var handleChange = function handleChange(event, value) {
    setValue(value);
  };

  return /*#__PURE__*/React.createElement(Input, _extends({
    value: value,
    onChange: handleChange
  }, args));
};
inputPrefixSuffix.storyName = 'Input with prefix and suffix';
inputPrefixSuffix.args = _objectSpread(_objectSpread({}, input.args), {}, {
  prefix: prefix,
  suffix: suffix
});
inputPrefixSuffix.argTypes = _objectSpread(_objectSpread({}, inputArgTypes), {}, {
  type: {
    control: 'select',
    options: types
  }
});
export var numericInput = function numericInput(args) {
  var _useState7 = useState(6),
      _useState8 = _slicedToArray(_useState7, 2),
      value = _useState8[0],
      setValue = _useState8[1];

  var handleChange = function handleChange(event, value) {
    setValue(value);
  };

  return /*#__PURE__*/React.createElement(NumericInput, _extends({
    value: value,
    onChange: handleChange
  }, args));
};
numericInput.storyName = 'NumericInput';
numericInput.args = {
  bold: false,
  disabled: false,
  error: '',
  helpText: '',
  success: '',
  warning: '',
  inverse: false,
  max: 10,
  min: 0,
  placeholder: placeholder,
  readOnly: false,
  size: 'medium',
  stepper: 'suffix',
  step: 1,
  textAlignRight: false,
  width: ''
};
numericInput.argTypes = _objectSpread(_objectSpread({}, inputArgTypes), {}, {
  stepper: {
    control: 'select',
    options: stepperOptions
  }
});
export var timeInput = function timeInput(args) {
  var _useState9 = useState(''),
      _useState10 = _slicedToArray(_useState9, 2),
      value = _useState10[0],
      setValue = _useState10[1];

  var handleChange = function handleChange(event) {
    setValue(event.currentTarget.value);
  };

  return /*#__PURE__*/React.createElement(TimeInput, _extends({
    value: value,
    onChange: handleChange
  }, args));
};
timeInput.storyName = 'TimeInput';
timeInput.args = {
  bold: false,
  disabled: false,
  error: '',
  helpText: '',
  success: '',
  warning: '',
  inverse: false,
  placeholder: placeholder,
  readOnly: false,
  size: 'medium',
  textAlighRight: false,
  width: '90px'
};
timeInput.argTypes = inputArgTypes;
export var durationInput = function durationInput(args) {
  var _useState11 = useState(),
      _useState12 = _slicedToArray(_useState11, 2),
      value = _useState12[0],
      setValue = _useState12[1];

  var handleChange = function handleChange(value) {
    setValue(value);
  };

  return /*#__PURE__*/React.createElement(DurationInput, _extends({
    value: value,
    onChange: handleChange
  }, args));
};
durationInput.storyName = 'DurationInput';
export var textarea = function textarea(args) {
  var _useState13 = useState(''),
      _useState14 = _slicedToArray(_useState13, 2),
      value = _useState14[0],
      setValue = _useState14[1];

  var handleChange = function handleChange(event) {
    setValue(event.currentTarget.value);
  };

  return /*#__PURE__*/React.createElement(Textarea, _extends({
    value: value,
    onChange: handleChange
  }, args));
};
textarea.storyName = 'Textarea';
textarea.args = {
  bold: false,
  disabled: false,
  error: '',
  helpText: '',
  success: '',
  warning: '',
  inverse: false,
  placeholder: placeholder,
  readOnly: false,
  size: 'medium',
  textAlignRight: false
};
textarea.argTypes = inputArgTypes;