"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styletronReact = require("styletron-react");

var _styles = require("../styles");

var _index = require("./index");

var _tag = require("../tag");

var _button = require("../button");

var _icon = require("../icon");

var _examplesList = _interopRequireDefault(require("./examples-list"));

var _examples$SIMPLE_EXAM;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var InputIcon = (0, _styles.styled)('span', function (props) {
  return {
    width: '16px',
    display: 'flex',
    alignItems: 'center',
    padding: props.$position === 'left' ? '0 0 0 12px' : props.$position === 'right' ? '0 12px 0 0' : '0',
    ':before': {
      content: '""',
      display: 'inline-block',
      boxSizing: 'border-box',
      verticalAlign: 'middle',
      width: '16px',
      height: '16px',
      borderRadius: '50%',
      backgroundColor: props.$isFocused ? props.$theme.colors.primary : '#999999'
    }
  };
});
var RootWithStyle = (0, _styletronReact.withStyle)(_index.StyledInputContainer, function (props) {
  var $disabled = props.$disabled,
      $error = props.$error,
      $isFocused = props.$isFocused,
      _props$$theme = props.$theme,
      colors = _props$$theme.colors,
      sizing = _props$$theme.sizing;
  return {
    borderColor: $disabled ? colors.borderAlt : $error ? colors.borderError : $isFocused ? 'darkseagreen' : colors.border,
    boxShadow: "0 0 ".concat(sizing.scale100, " ").concat($disabled ? 'transparent' : $error ? colors.shadowError : $isFocused ? 'lightseagreen' : 'transparent')
  };
});
var TextHighlight = (0, _styles.styled)('span', function (_ref) {
  var $theme = _ref.$theme;
  return {
    color: $theme.colors.primary
  };
});
var ValueWrapper = (0, _styles.styled)('div', {
  flex: '1 1 0%',
  flexWrap: 'wrap',
  display: 'flex'
});

var InputReplacement = function InputReplacement(props) {
  return React.createElement(ValueWrapper, {
    style: {
      alignItems: 'center'
    }
  }, ['tag 1 to search', 'tag 2 to search', 'tag 3 to search', 'tag 4 to search', 'tag 5 to search'].map(function (text, index) {
    return React.createElement(_tag.Tag, {
      key: index
    }, text);
  }), React.createElement(_index.StyledInput, props));
};

var _default = (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.SIMPLE_EXAMPLE, function Story1() {
  return React.createElement(React.Fragment, null, React.createElement(_index.Input, {
    placeholder: "Controlled input"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    placeholder: "Uncontrolled (stateful) input"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.SIZE_EXAMPLE, function Story2() {
  return React.createElement(React.Fragment, null, React.createElement(_index.StatefulInput, {
    placeholder: "Default input"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    size: _index.SIZE.compact,
    placeholder: "Compact input"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.STATE_EXAMPLE, function Story3() {
  return React.createElement(React.Fragment, null, React.createElement(_index.StatefulInput, {
    size: _index.SIZE.compact,
    placeholder: "Default input"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    initialState: {
      value: 'uber'
    },
    startEnhancer: "@",
    endEnhancer: ".com",
    size: _index.SIZE.compact,
    placeholder: "Initially focused input",
    overrides: {
      Input: {
        props: {
          'data-test': 'e2e'
        }
      }
    }
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    size: _index.SIZE.compact,
    error: true,
    placeholder: "Input in an error state"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    startEnhancer: "@",
    endEnhancer: ".com",
    size: _index.SIZE.compact,
    error: true,
    placeholder: "Input with enhancers in an error state"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    size: _index.SIZE.compact,
    disabled: true,
    placeholder: "Disabled input"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    startEnhancer: "@",
    endEnhancer: ".com",
    size: _index.SIZE.compact,
    disabled: true,
    placeholder: "Disabled input with enhancers"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.ENHANCERS_EXAMPLE, function Story4() {
  return React.createElement(React.Fragment, null, React.createElement(_index.StatefulInput, {
    startEnhancer: "@",
    placeholder: "Input with a startEnhancer"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    endEnhancer: ".00",
    placeholder: "Input with an endEnhancer"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    startEnhancer: "@",
    endEnhancer: ".00",
    placeholder: "Input with start and end enhancers"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    startEnhancer: React.createElement(InputIcon, null),
    endEnhancer: React.createElement(InputIcon, null),
    placeholder: "Input with element type enhancers"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    startEnhancer: function startEnhancer(_ref2) {
      var $isFocused = _ref2.$isFocused;
      return $isFocused ? React.createElement(TextHighlight, null, "@") : '@';
    },
    endEnhancer: function endEnhancer(_ref3) {
      var $isFocused = _ref3.$isFocused;
      return $isFocused ? React.createElement(TextHighlight, null, ".00") : '.00';
    },
    placeholder: "Input with function type enhancers. Shared props are passed into an enhancer func"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.BEFORE_AFTER_EXAMPLE, function Story5() {
  return React.createElement(React.Fragment, null, React.createElement(_index.StatefulInput, {
    overrides: {
      Before: function Before(props) {
        return React.createElement(InputIcon, _extends({}, props, {
          $position: "left"
        }));
      }
    },
    placeholder: "Input with a Before component"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    overrides: {
      After: function After(props) {
        return React.createElement(InputIcon, _extends({}, props, {
          $position: "right"
        }));
      }
    },
    placeholder: "Input with an After component"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.VALUE_EXAMPLE, function Story6() {
  return React.createElement(_index.StatefulInput, {
    placeholder: "Input with search tags",
    overrides: {
      Input: {
        style: {
          width: 'auto'
        },
        component: InputReplacement
      },
      After: function After(props) {
        return React.createElement(_icon.DeleteAlt, {
          size: 24,
          color: "#999",
          overrides: {
            Svg: {
              style: {
                cursor: 'pointer',
                alignSelf: 'center'
              }
            }
          }
        });
      }
    }
  });
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.OVERRIDES_EXAMPLE, function Story7() {
  return React.createElement(React.Fragment, null, React.createElement(_index.StatefulInput, {
    overrides: {
      InputContainer: {
        component: RootWithStyle
      }
    },
    placeholder: "Input with a custom InputContainer override"
  }), React.createElement("br", null), React.createElement(_index.StatefulInput, {
    overrides: {
      Input: {
        props: {
          'data-test': 'test'
        },
        style: function style(_ref4) {
          var colors = _ref4.$theme.colors;
          return {
            color: colors.primary
          };
        }
      }
    },
    initialState: {
      value: "With a 'data-test' attrs passes to the input and text style override"
    },
    placeholder: "With a 'data-test' attrs passes to the input and text style override"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.REF_EXAMPLE, function Story8() {
  var inputRef = React.createRef();
  return React.createElement(React.Fragment, null, React.createElement(_index.StatefulInput, {
    inputRef: inputRef,
    placeholder: "With input ref"
  }), React.createElement(_button.Button, {
    onClick: function onClick() {
      inputRef.current && inputRef.current.focus();
    },
    overrides: {
      BaseButton: {
        style: {
          width: '100%',
          marginTop: '12px'
        }
      }
    }
  }, "Click here to focus input"));
}), _examples$SIMPLE_EXAM);

exports.default = _default;