"use strict";

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

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

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

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

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

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 _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 _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

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

var onChange = function onChange(e) {
  // eslint-disable-next-line no-console
  console.log('Checked:', e.target.checked);
};

var Icon = (0, _styletronReact.styled)('span', function () {
  return {
    display: 'flex',
    alignItems: 'center',
    ':before': {
      content: '"Click to focus on checkbox"',
      display: 'inline-block',
      boxSizing: 'border-box',
      verticalAlign: 'middle',
      borderRadius: '2px',
      borderWidth: '2px',
      borderStyle: 'solid',
      borderColor: 'black',
      backgroundColor: 'lightblue'
    }
  };
});
Icon.displayName = "Icon";

var GroupList =
/*#__PURE__*/
function (_React$Component) {
  _inherits(GroupList, _React$Component);

  function GroupList(props) {
    var _this;

    _classCallCheck(this, GroupList);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(GroupList).call(this, props));
    _this.state = {
      checkboxes: [false, false]
    };
    return _this;
  }

  _createClass(GroupList, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var checkboxes = this.state.checkboxes;
      var unchecked = checkboxes.filter(function (checkbox) {
        return !checkbox;
      }).length;
      var isIndeterminate = unchecked > 0 && unchecked < checkboxes.length;
      return React.createElement("div", null, React.createElement("div", window.E2E_TEST ? {
        'data-name': 'radioMain'
      } : null, React.createElement(_index.Checkbox, {
        components: {},
        onChange: function onChange(e) {
          var checkboxes = [e.target.checked, e.target.checked];

          _this2.setState({
            checkboxes: checkboxes
          });
        },
        isIndeterminate: isIndeterminate,
        checked: unchecked === 0
      }, "Indeterminate checkbox if not all subcheckboxes are checked")), React.createElement("div", {
        style: {
          padding: 30
        }
      }, React.createElement("div", window.E2E_TEST ? {
        'data-name': 'radioSub1'
      } : null, React.createElement(_index.Checkbox, {
        overrides: {
          Root: _index.StyledRoot,
          Label: _index.StyledLabel,
          Checkmark: _index.StyledCheckmark,
          Input: _index.StyledInput
        },
        checked: checkboxes[0],
        onChange: function onChange(e) {
          var newCheckboxes = checkboxes.slice();
          newCheckboxes[0] = e.target.checked;

          _this2.setState({
            checkboxes: newCheckboxes
          });
        }
      }, "First subcheckbox")), React.createElement("div", window.E2E_TEST ? {
        'data-name': 'radioSub2'
      } : null, React.createElement(_index.Checkbox, {
        checked: checkboxes[1],
        onChange: function onChange(e) {
          var newCheckboxes = checkboxes.slice();
          newCheckboxes[1] = e.target.checked;

          _this2.setState({
            checkboxes: newCheckboxes
          });
        }
      }, "Second subcheckbox"))));
    }
  }]);

  return GroupList;
}(React.Component);

_defineProperty(GroupList, "defaultProps", {});

var _default = (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.SIMPLE_EXAMPLE, function () {
  return React.createElement(_index.StatefulCheckbox, {
    onChange: onChange
  }, "click me");
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.MULTILINE, function () {
  return React.createElement(_index.StatefulCheckbox, {
    onChange: onChange
  }, "It started as a simple idea: What if you could request a ride from your phone? More than 5 billion trips later, we\u2019re working to make transportation safer and more accessible, helping people order food quickly and affordably, reducing congestion in cities by getting more people into fewer cars, and creating opportunities for people to work on their own terms.");
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.WITH_ERROR, function () {
  return React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    isError: true
  }, "Checkbox with an isError");
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.INDETERMINATE, function () {
  return React.createElement(GroupList, null);
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.DISABLED, function () {
  return React.createElement("div", null, React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    disabled: true
  }, "Disabled checkbox"), React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    disabled: true,
    initialState: {
      checked: true
    }
  }, "Disabled checkbox (checked)"));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.LEFT_ALIGN, function () {
  return React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    labelPlacement: "left"
  }, "Label on the left");
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.BOTTOM_ALIGN, function () {
  return React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    labelPlacement: "bottom"
  }, "Label on the bottom");
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.STYLES_OVERRIDES, function () {
  return React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    overrides: {
      Root: (0, _styletronReact.withStyle)(_index.StyledRoot, function () {
        return {
          border: "1px solid green",
          padding: '10px'
        };
      }),
      Label: (0, _styletronReact.withStyle)(_index.StyledLabel, function () {
        return {
          color: 'orange',
          fontSize: '25px'
        };
      }),
      Checkmark: (0, _styletronReact.withStyle)(_index.StyledCheckmark, function (props) {
        var checked = props.checked;
        return checked ? {
          borderColor: 'pink'
        } : {
          borderColor: 'pink',
          backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="-1" x2="11" y2="-1" transform="translate(0 2)" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>\');',
          backgroundColor: 'black'
        };
      })
    }
  }, "With style overrides");
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.COMPONENTS_OVERRIDES, function () {
  var customLabel = function customLabel() {
    var crab = 'data:image/svg+xml;charset=US-ASCII, <svg xmlns="http://www.w3.org/2000/svg" viewBox="1.5 113.9 256 256"><path fill="#9E2610" d="M72.1 296.8s-31.8 11.7-37.9 20.5c0 0 3.5-21.3 30.9-32.7l7 12.2zM84.2 307.5s-21.9 22.8-23.4 32.7c0 0-5.8-19.3 12.5-40.1l10.9 7.4zM68.3 278.8s-34 2.4-43.3 9.1c0 0 12.3-19.5 42.3-22.8l1 13.7zM185.4 295s31.8 11.7 37.9 20.5c0 0-3.5-21.3-30.9-32.7l-7 12.2z"/><path fill="#D62D0E" d="M50.5 223.5S13 205.5 41 161c0 0 9-19.5 38-16.5L53.5 205l46-32.8s12.5 24.5-11 42.2c0 0-13.8 10.2-20.8 9 0 0 4.5 11 12 16.2l3.5 3.2-9.5 11c.1.2-20.7-15.3-23.2-30.3z"/><path fill="#9E2610" d="M173.3 305.6s21.9 22.8 23.4 32.7c0 0 5.8-19.3-12.5-40.1l-10.9 7.4zM189.2 276.9s34 2.4 43.3 9.1c0 0-12.3-19.5-42.3-22.8l-1 13.7z"/><path fill="#D62D0E" d="M207.9 223.5s37.5-18 9.5-62.5c0 0-9-19.5-38-16.5l25.5 60.5-46-32.8s-12.5 24.5 11 42.2c0 0 13.8 10.2 20.8 9 0 0-4.5 11-12 16.2l-3.5 3.2 9.5 11c0 .2 20.7-15.3 23.2-30.3z"/><path fill="#D62D0E" d="M127.8 212s44-5.2 65.2 57.8c0 0 11.8 44.5-62.2 48.5 0 0-70.2 1.2-66.2-43.8-.1 0 6.6-54 63.2-62.5z"/><circle fill="#FFF" cx="103.8" cy="265.1" r="23.5"/><circle fill="#FFF" cx="153.6" cy="264.1" r="23.5"/><circle cx="105.2" cy="263.8" r="14.8"/><circle cx="152.2" cy="262.5" r="14.8"/><ellipse transform="rotate(-45.37 157.15 256.57)" fill="#FFF" cx="157.1" cy="256.6" rx="4.7" ry="7.2"/><ellipse transform="rotate(-45.37 110.35 257.456)" fill="#FFF" cx="110.3" cy="257.4" rx="4.7" ry="7.2"/><path d="M78.5 290s12.7 20 51.6 19.5c0 0 34.2 1.5 49.2-19.5 0 0-15.8 17.5-49.2 17.2 0 0-36.1.3-51.6-17.2z"/></svg>';
    return React.createElement("span", null, "This is a totally different ", React.createElement("b", null, "checkbox"), ". Click on hourglass", React.createElement("img", {
      style: {
        width: 40
      },
      src: crab,
      alt: "crab"
    }));
  };

  var customCheckmark = function customCheckmark(props) {
    var checked = props.checked;
    var color = checked ? 'red' : 'blue';
    var blackHourglass = "data:image/svg+xml;utf8,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 1000 1000\"  xml:space=\"preserve\"><g fill=\"".concat(color, "\"><path d=\"M293.7,886.8h-51.6V726.9c2.6-12.9,30.9-116.1,90.3-147c33.5-15.5,54.2-64.5,61.9-85.1v-18.1c-7.7-20.6-30.9-69.6-61.9-85.1c-59.3-30.9-87.7-134.1-90.3-147v-5.2V110.6h51.6v126.4c10.3,36.1,33.5,95.4,61.9,108.3c59.3,30.9,90.3,113.5,90.3,118.6l2.6,5.2v33.5l-2.6,5.2c0,2.6-30.9,87.7-90.3,118.6c-30.9,15.5-56.7,82.5-61.9,108.3V886.8z\"/><path d=\"M757.9,886.8h-51.6V734.7c-10.3-36.1-33.5-95.4-61.9-108.3c-59.3-30.9-90.3-113.5-90.3-118.6l-2.6-2.6v-33.5l2.6-5.2c0-2.6,30.9-87.7,90.3-118.6c30.9-15.5,56.7-82.5,61.9-108.3V113.2h51.6v134.1c-2.6,12.9-30.9,116.1-90.3,147c-33.5,15.5-54.2,64.5-61.9,85.1v18.1c7.7,20.6,30.9,69.6,61.9,85.1c59.3,30.9,87.7,134.1,90.3,147v5.2V886.8z\"/><path d=\"M371.1,267.9c0,0,51.6,128.9,128.9,128.9c77.4,0,128.9-128.9,128.9-128.9s-51.6,25.8-128.9,25.8C422.6,293.7,371.1,267.9,371.1,267.9z\"/><path d=\"M809.5,61.6H190.5V10h618.9V61.6z\"/><path d=\"M809.5,990H190.5v-51.6h618.9V990z\"/><path d=\"M345.3,886.8c0,0,51.6-154.7,154.7-154.7c103.2,0,154.7,154.7,154.7,154.7H345.3z\"/></g></svg>");
    return React.createElement("img", {
      style: {
        width: 40
      },
      src: blackHourglass,
      alt: "sandbox"
    });
  };

  return React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    overrides: {
      Label: customLabel,
      Checkmark: customCheckmark
    }
  }, "With style overrides");
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.EXTRA_PROPS, function () {
  function withProps(Component, customProps) {
    return function (props) {
      return React.createElement(Component, _extends({}, customProps, props));
    };
  }

  var RootWithProps = withProps(_index.StyledRoot, {
    'data-value': 'secret value'
  });
  return React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    overrides: {
      Root: RootWithProps
    }
  }, "With a custom data-value attr on the Root");
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.WITH_FOCUS, function () {
  var inputRef = React.createRef();
  var isFocused = true;
  return React.createElement("div", null, React.createElement(Icon, {
    $position: "right",
    onClick: function onClick() {
      if (inputRef.current) {
        isFocused = !isFocused;

        if (isFocused) {
          inputRef.current.focus();
        } else {
          inputRef.current.blur();
        }
      }
    }
  }), React.createElement(_index.StatefulCheckbox, {
    onChange: onChange,
    inputRef: inputRef
  }, "Focused checkbox"));
}), _examples$SIMPLE_EXAM);

exports.default = _default;