"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("@storybook/react");

var _react2 = _interopRequireDefault(require("react"));

var _ = require(".");

var _Box = require("../Box");

var _Button = require("../Button");

var _CheckboxGroup = require("../CheckboxGroup");

var _Form = require("../Form");

var _FormErrorMessage = require("../FormErrorMessage");

var _Text = require("../Text");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Checkbox', module);
stories.addDecorator(function (story) {
  return __jsx(_Box.Box, {
    maxWidth: "lg",
    mx: "auto",
    mt: 6,
    p: 6
  }, story());
});
stories.add('Default', function () {
  return __jsx(_react2["default"].Fragment, null, __jsx(_CheckboxGroup.CheckboxGroup, null, __jsx(_.Checkbox, {
    variantColor: "pink",
    isFullWidth: true,
    defaultIsChecked: true
  }, "Checkbox 1"), __jsx(_.Checkbox, {
    isInvalid: true
  }, "Checkbox 2"), __jsx(_FormErrorMessage.FormErrorMessage //  isInvalid
  , {
    id: "err"
  }, "This is not valid")), __jsx(_CheckboxGroup.CheckboxGroup, null, __jsx(_.Checkbox, {
    isDisabled: true
  }, "Disabled "), __jsx(_.Checkbox, {
    isChecked: true,
    isDisabled: true
  }, "Disabled and checked")));
});
stories.add('disabled checkbox', function () {
  return __jsx(_CheckboxGroup.CheckboxGroup, null, __jsx(_.Checkbox, {
    isDisabled: true
  }, "Disabled "), __jsx(_.Checkbox, {
    isChecked: true,
    isDisabled: true
  }, "Disabled and checked"));
});
stories.add('readonly checkbox', function () {
  return __jsx(_CheckboxGroup.CheckboxGroup, null, __jsx(_.Checkbox, {
    isReadOnly: true
  }, "Readonly"), __jsx(_.Checkbox, {
    isChecked: true,
    isReadOnly: true
  }, "Readonly and checked"));
});

function IndeterminateExample() {
  var _React$useState = _react2["default"].useState([]),
      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
      checkedItems = _React$useState2[0],
      setCheckedItems = _React$useState2[1]; // Children


  var childNames = ['child1', 'child2']; // Parent

  var parentName = 'parent';
  var allChecked = checkedItems.every(String) && checkedItems.length === childNames.length;
  var isIndeterminate = checkedItems.some(String) && !allChecked;
  return __jsx(_CheckboxGroup.CheckboxGroup, {
    value: checkedItems,
    onChange: function onChange(newVals) {
      return setCheckedItems(newVals);
    }
  }, __jsx(_.Checkbox, {
    isChecked: allChecked,
    isIndeterminate: isIndeterminate,
    onChange: function onChange(e) {
      setCheckedItems(e.target.checked ? childNames : []);
    },
    name: parentName
  }, "Parent Checkbox"), __jsx(_.Checkbox, {
    name: childNames[0],
    isChild: true
  }, "Child Checkbox 1"), __jsx(_.Checkbox, {
    name: childNames[1],
    isChild: true
  }, "Child Checkbox 2"));
}

stories.add('indeterminate checkbox', function () {
  return __jsx(IndeterminateExample, null);
});
stories.add('(Form) - Parent key', function () {
  return __jsx(_Form.Form, {
    onSubmit: function onSubmit(e, _ref) {
      var getFormValue = _ref.getFormValue;
      e.preventDefault();
      console.log(getFormValue());
    }
  }, __jsx(_Text.Text, null, "Checkbox values will be contained within a single form key array."), __jsx(_CheckboxGroup.CheckboxGroup, {
    name: "flavors"
  }, __jsx(_.Checkbox, {
    name: "chocolate"
  }, "Chocolate"), __jsx(_.Checkbox, {
    name: "vanilla"
  }, "Vanilla")), __jsx(_Button.Button, {
    type: "submit"
  }, "submit"));
});
stories.add('(Form) - Individual keys', function () {
  return __jsx(_Form.Form, {
    onSubmit: function onSubmit(e, _ref2) {
      var getFormValue = _ref2.getFormValue;
      e.preventDefault();
      console.log(getFormValue());
    }
  }, __jsx(_Text.Text, null, "Checkbox values will each have their own key."), __jsx(_CheckboxGroup.CheckboxGroup, null, __jsx(_.Checkbox, {
    name: "chocolate"
  }, "Chocolate"), __jsx(_.Checkbox, {
    name: "vanilla"
  }, "Vanilla")), __jsx(_Button.Button, {
    type: "submit"
  }, "submit"));
});
//# sourceMappingURL=examples.js.map