var _excluded = ["data"];

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { useState } from 'react';
import TextField from './TextField';
import { DATE_MASK } from './useLabelMask';
export default {
  title: 'Components/Text Field',
  component: TextField,
  argTypes: {
    defaultValue: {
      control: {
        type: 'text'
      }
    },
    errorMessage: {
      control: {
        type: 'text'
      }
    },
    hint: {
      control: {
        type: 'text'
      }
    },
    label: {
      control: {
        type: 'text'
      }
    },
    requirementLabel: {
      control: {
        type: 'text'
      }
    },
    rows: {
      control: {
        type: 'number'
      }
    },
    size: {
      type: {
        name: 'string',
        required: false
      },
      description: 'Set the max-width of the input either to `small` or `medium`.',
      table: {
        type: {
          summary: 'string'
        }
      },
      control: {
        type: 'radio'
      },
      options: ['small', 'medium', 'default']
    },
    type: {
      description: 'HTML `input` [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#<input>_types) attribute. If you are using `type=number` please use the numeric prop instead.',
      control: {
        type: 'text'
      }
    }
  },
  args: {
    label: 'Text Field Label',
    onChange: function onChange() {},
    name: 'text-field-story'
  },
  parameters: {}
};

var Template = function Template(_ref) {
  var data = _ref.data,
      args = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement(TextField, args);
};

export var SingleLineField = Template.bind({});
export var MultilineField = Template.bind({});
MultilineField.args = {
  multiline: true,
  rows: 3
};
export var MaskedField = Template.bind({});
MaskedField.args = {
  mask: 'currency',
  label: 'Currency Field',
  inputMode: 'numeric'
};
export var ErrorField = Template.bind({});
ErrorField.args = {
  errorMessage: 'Example error message',
  hint: 'Helpful hint text'
};
export var SuccessField = Template.bind({});
SuccessField.args = {
  fieldClassName: 'ds-c-field--success'
};
export var DisabledField = Template.bind({});
DisabledField.args = {
  disabled: true
};
export var LabelMaskedField = function LabelMaskedField() {
  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      date = _useState2[0],
      setDate = _useState2[1];

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, {
    name: "labelMask-date",
    label: "Enter the last day of your coverage",
    hint: "If you don't have it, give your best estimate. For example: 01/02/2022",
    labelMask: DATE_MASK,
    value: date,
    onChange: function onChange(event) {
      return setDate(event.currentTarget.value);
    }
  }));
};
export var AllMaskedFields = function AllMaskedFields() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, {
    ariaLabel: "Enter monthly income amount in dollars.",
    labelClassName: "ds-u-margin-top--0",
    label: "Currency",
    mask: "currency",
    inputMode: "numeric",
    type: "text",
    name: "currency_example",
    onBlur: function onBlur(evt) {
      return console.log('Unmasked value: ', unmaskValue(evt.target.value, 'currency'));
    },
    defaultValue: "2,500"
  }), /*#__PURE__*/React.createElement(TextField, {
    label: "Phone number",
    mask: "phone",
    name: "phone_example",
    onBlur: function onBlur(evt) {
      return console.log('Unmasked value: ', unmaskValue(evt.target.value, 'phone'));
    },
    type: "tel",
    defaultValue: "1234567890"
  }), /*#__PURE__*/React.createElement(TextField, {
    label: "Social security number (SSN)",
    mask: "ssn",
    inputMode: "numeric",
    type: "text",
    name: "ssn_example",
    onBlur: function onBlur(evt) {
      return console.log('Unmasked value: ', unmaskValue(evt.target.value, 'ssn'));
    },
    defaultValue: "123456789"
  }), /*#__PURE__*/React.createElement(TextField, {
    label: "Zip code",
    mask: "zip",
    inputMode: "numeric",
    type: "text",
    name: "zip_example",
    onBlur: function onBlur(evt) {
      return console.log('Unmasked value: ', unmaskValue(evt.target.value, 'zip'));
    },
    defaultValue: "123456789"
  }));
};