var _examples$SIMPLE_EXAM;

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); }

/*
Copyright (c) 2018 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import * as React from 'react';
import { withStyle } from 'styletron-react';
import { styled } from '../styles/index.js';
import { Input as ControlledInput, MaskedInput, StatefulInput as Input, StyledInput, StyledInputContainer, SIZE } from './index.js';
import { Tag } from '../tag/index.js';
import { Button } from '../button/index.js';
import { DeleteAlt } from '../icon/index.js';
import examples from './examples-list.js';
var InputIcon = 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'
    }
  };
});
InputIcon.displayName = "InputIcon";
var RootWithStyle = withStyle(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')
  };
});
RootWithStyle.displayName = "RootWithStyle";
var TextHighlight = styled('span', function (_ref) {
  var $theme = _ref.$theme;
  return {
    color: $theme.colors.primary
  };
});
TextHighlight.displayName = "TextHighlight";
var ValueWrapper = styled('div', {
  flex: '1 1 0%',
  flexWrap: 'wrap',
  display: 'flex'
});
ValueWrapper.displayName = "ValueWrapper";

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, {
      key: index
    }, text);
  }), React.createElement(StyledInput, props));
};

export default (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, examples.SIMPLE_EXAMPLE, function simpleExample() {
  return React.createElement(React.Fragment, null, React.createElement(ControlledInput, {
    placeholder: "Controlled input"
  }), React.createElement("br", null), React.createElement(Input, {
    placeholder: "Uncontrolled (stateful) input"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.SIZE_EXAMPLE, function sizeExample() {
  return React.createElement(React.Fragment, null, React.createElement(Input, {
    placeholder: "Default input"
  }), React.createElement("br", null), React.createElement(Input, {
    size: SIZE.compact,
    placeholder: "Compact input"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.STATE_EXAMPLE, function stateExample() {
  return React.createElement(React.Fragment, null, React.createElement(Input, {
    size: SIZE.compact,
    placeholder: "Default input"
  }), React.createElement("br", null), React.createElement(Input // eslint-disable-next-line jsx-a11y/no-autofocus
  , {
    autoFocus: true,
    initialState: {
      value: 'uber'
    },
    startEnhancer: "@",
    endEnhancer: ".com",
    size: SIZE.compact,
    placeholder: "Initially focused input",
    overrides: {
      Input: {
        props: {
          'data-test': 'e2e'
        }
      }
    }
  }), React.createElement("br", null), React.createElement(Input, {
    size: SIZE.compact,
    error: true,
    placeholder: "Input in an error state"
  }), React.createElement("br", null), React.createElement(Input, {
    startEnhancer: "@",
    endEnhancer: ".com",
    size: SIZE.compact,
    error: true,
    placeholder: "Input with enhancers in an error state"
  }), React.createElement("br", null), React.createElement(Input, {
    size: SIZE.compact,
    disabled: true,
    placeholder: "Disabled input"
  }), React.createElement("br", null), React.createElement(Input, {
    startEnhancer: "@",
    endEnhancer: ".com",
    size: SIZE.compact,
    disabled: true,
    placeholder: "Disabled input with enhancers"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.ENHANCERS_EXAMPLE, function enhancersExample() {
  return React.createElement(React.Fragment, null, React.createElement(Input, {
    startEnhancer: "@",
    placeholder: "Input with a startEnhancer"
  }), React.createElement("br", null), React.createElement(Input, {
    endEnhancer: ".00",
    placeholder: "Input with an endEnhancer"
  }), React.createElement("br", null), React.createElement(Input, {
    startEnhancer: "@",
    endEnhancer: ".00",
    placeholder: "Input with start and end enhancers"
  }), React.createElement("br", null), React.createElement(Input, {
    startEnhancer: React.createElement(InputIcon, null),
    endEnhancer: React.createElement(InputIcon, null),
    placeholder: "Input with element type enhancers"
  }), React.createElement("br", null), React.createElement(Input, {
    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, examples.BEFORE_AFTER_EXAMPLE, function beforeAfterExample() {
  return React.createElement(React.Fragment, null, React.createElement(Input, {
    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(Input, {
    overrides: {
      After: function After(props) {
        return React.createElement(InputIcon, _extends({}, props, {
          $position: "right"
        }));
      }
    },
    placeholder: "Input with an After component"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.VALUE_EXAMPLE, function valueExample() {
  return React.createElement(Input, {
    placeholder: "Input with search tags",
    overrides: {
      Input: {
        style: {
          width: 'auto'
        },
        component: InputReplacement
      },
      After: function After(props) {
        return React.createElement(DeleteAlt, {
          size: 24,
          color: "#999",
          overrides: {
            Svg: {
              style: {
                cursor: 'pointer',
                alignSelf: 'center'
              }
            }
          }
        });
      }
    }
  });
}), _defineProperty(_examples$SIMPLE_EXAM, examples.MASK_EXAMPLE, function maskExample() {
  return React.createElement(React.Fragment, null, React.createElement(MaskedInput, {
    placeholder: "Phone number",
    mask: "(999) 999-9999"
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.OVERRIDES_EXAMPLE, function overrideExample() {
  return React.createElement(React.Fragment, null, React.createElement(Input, {
    overrides: {
      InputContainer: {
        component: RootWithStyle
      }
    },
    placeholder: "Input with a custom InputContainer override"
  }), React.createElement("br", null), React.createElement(Input, {
    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, examples.REF_EXAMPLE, function refExample() {
  var inputRef = React.createRef();
  return React.createElement(React.Fragment, null, React.createElement(Input, {
    inputRef: inputRef,
    placeholder: "With input ref"
  }), React.createElement(Button, {
    onClick: function onClick() {
      inputRef.current && inputRef.current.focus();
    },
    overrides: {
      BaseButton: {
        style: {
          width: '100%',
          marginTop: '12px'
        }
      }
    }
  }, "Click here to focus input"));
}), _examples$SIMPLE_EXAM);