"use strict";

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

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

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

var _ = require("./");

var _input = require("../input");

var _textarea = require("../textarea");

var _checkbox = require("../checkbox");

var _radio = require("../radio");

var _tests$CONTROLS_EXAMP;

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

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

var InputIcon = (0, _styles.styled)('span', function (props) {
  return {
    width: '16px',
    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 CustomLabel = function CustomLabel(_ref) {
  var children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["children"]);

  return React.createElement(_.StyledLabel, _extends({}, rest, {
    "data-label": "data-label"
  }), children, React.createElement(InputIcon, _extends({
    $position: "left"
  }, rest)));
};

var Span = (0, _styles.styled)('span', {
  display: 'flex',
  alignItems: 'center'
});
var Icon = (0, _styles.styled)('span', function (_ref2) {
  var $position = _ref2.$position,
      $error = _ref2.$error,
      $theme = _ref2.$theme;
  return {
    padding: $position === 'left' ? '0 8px 0 0' : '0 0 0 8px',
    ':before': {
      content: '""',
      display: 'flex',
      boxSizing: 'border-box',
      verticalAlign: 'middle',
      width: '16px',
      height: '16px',
      borderRadius: '50%',
      backgroundColor: $error ? $theme.colors.negative400 : '#999999'
    }
  };
});
var tests = {
  CONTROLS_EXAMPLE: 'controls with label and caption',
  BASE_EXAMPLE: 'label and caption props'
};
exports.tests = tests;

var _default = (_tests$CONTROLS_EXAMP = {}, _defineProperty(_tests$CONTROLS_EXAMP, tests.CONTROLS_EXAMPLE, function example1() {
  return React.createElement("div", null, React.createElement(_.FormControl, {
    label: "Input label",
    caption: "Input caption"
  }, React.createElement(_input.StatefulInput, {
    size: _input.SIZE.compact
  })), React.createElement(_.FormControl, {
    label: "Textarea label",
    caption: "Textarea caption"
  }, React.createElement(_textarea.StatefulTextarea, {
    size: _input.SIZE.compact
  })), React.createElement(_.FormControl, {
    label: "Checkbox label",
    caption: "Checkbox caption"
  }, React.createElement(_checkbox.StatefulCheckbox, null, "Checkbox control")), React.createElement(_.FormControl, {
    label: "RadioGroup label",
    caption: "RadioGroup caption"
  }, React.createElement(_radio.StatefulRadioGroup, null, React.createElement(_radio.StyledRadio, {
    value: "red"
  }, "Red"), React.createElement(_radio.StyledRadio, {
    value: "green"
  }, "Green"), React.createElement(_radio.StyledRadio, {
    value: "blue"
  }, "Blue"))));
}), _defineProperty(_tests$CONTROLS_EXAMP, tests.BASE_EXAMPLE, function example1() {
  return React.createElement("div", null, React.createElement(_.FormControl, {
    label: "String type label",
    caption: "String type caption"
  }, React.createElement(_input.StatefulInput, {
    size: _input.SIZE.compact
  })), React.createElement(_.FormControl, {
    label: React.createElement(Span, null, "Element type label", React.createElement(Icon, {
      $position: "right"
    })),
    caption: React.createElement(Span, null, React.createElement(Icon, {
      $position: "left"
    }), "Element type caption")
  }, React.createElement(_input.StatefulInput, {
    size: _input.SIZE.compact
  })), React.createElement(_.FormControl // $FlowFixMe
  , {
    label: function label(props) {
      var $disabled = props.$disabled;
      return "Function type label gets shared props.".concat($disabled ? ' This input is disabled.' : '');
    } // $FlowFixMe
    ,
    caption: function caption(props) {
      var $disabled = props.$disabled;
      return "Function type caption gets shared props.".concat($disabled ? ' This input is disabled.' : '');
    }
  }, React.createElement(_input.StatefulInput, {
    size: _input.SIZE.compact,
    disabled: true
  })), React.createElement(_.FormControl, {
    label: "Label",
    caption: "Caption",
    error: "String type error"
  }, React.createElement(_input.StatefulInput, {
    size: _input.SIZE.compact
  })), React.createElement(_.FormControl, {
    label: "Label",
    caption: "Caption",
    error: React.createElement(Span, null, React.createElement(Icon, {
      $position: "left",
      $error: true
    }), "Element type error")
  }, React.createElement(_input.StatefulInput, {
    size: _input.SIZE.compact
  })), React.createElement(_.FormControl, {
    label: "Label",
    caption: "Caption" // $FlowFixMe
    ,
    error: function error(props) {
      var $required = props.$required;
      return "Function type error gets shared props.".concat($required ? ' This input is required.' : '');
    }
  }, React.createElement(_input.StatefulInput, {
    size: _input.SIZE.compact,
    required: true
  })), React.createElement(_.FormControl, {
    label: "Custom label",
    caption: "Caption with style overrides and extra props",
    overrides: {
      Label: {
        component: CustomLabel
      },
      Caption: {
        props: {
          'data-test-label': 'test'
        },
        style: {
          color: '#00F'
        }
      }
    }
  }, React.createElement(_input.StatefulInput, {
    size: _input.SIZE.compact
  })));
}), _tests$CONTROLS_EXAMP);

exports.default = _default;