"use strict";

var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _index = _interopRequireDefault(require("./index"));
var _storybookState = require("@sambego/storybook-state");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var colorPalettes = [{
  identifier: 'default HKS_colors',
  colors: [{
    identifier: 'red',
    hex_value: 'FF0000',
    title: 'red'
  }, {
    identifier: 'blue',
    hex_value: '0000FF',
    title: 'blue'
  }, {
    identifier: 'black',
    hex_value: '000000',
    title: 'black'
  }],
  title: 'HKS'
}, {
  identifier: 'default Pantone_colors',
  colors: [{
    identifier: 'red',
    hex_value: 'FF0000',
    title: 'red'
  }, {
    identifier: 'black',
    hex_value: '000000',
    title: 'black'
  }, {
    identifier: 'white',
    hex_value: 'FFFFFF',
    title: 'white'
  }, {
    identifier: 'blue',
    hex_value: '0000FF',
    title: 'blue'
  }, {
    identifier: 'green',
    hex_value: '00FF00',
    title: 'green'
  }],
  title: 'Pantone'
}, {
  identifier: 'default RAL_colors',
  colors: [{
    identifier: 'red',
    hex_value: 'FF0000',
    title: 'red'
  }, {
    identifier: 'black',
    hex_value: '000000',
    title: 'black'
  }, {
    identifier: 'white',
    hex_value: 'FFFFFF',
    title: 'white'
  }, {
    identifier: 'yellow',
    hex_value: 'FFFF00',
    title: 'yellow'
  }, {
    identifier: 'blue',
    hex_value: '0000FF',
    title: 'blue'
  }, {
    identifier: 'green',
    hex_value: '00FF00',
    title: 'green'
  }, {
    identifier: 'mint',
    hex_value: 'BBDDAA',
    title: 'mint'
  }, {
    identifier: 'violett',
    hex_value: 'AAAAFF',
    title: 'violett'
  }, {
    identifier: 'cyan',
    hex_value: '00FFFF',
    title: 'cyan'
  }, {
    identifier: 'grey',
    hex_value: 'eeeeee',
    title: 'grey'
  }],
  title: 'RAL'
}];
var colorPalette = [{
  identifier: 'default HKS_colors',
  colors: [{
    identifier: 'red',
    hex_value: 'FF0000',
    title: 'red'
  }, {
    identifier: 'blue',
    hex_value: '0000FF',
    title: 'blue'
  }, {
    identifier: 'black',
    hex_value: '000000',
    title: 'black'
  }],
  title: 'HKS'
}];
var store = new _storybookState.Store({
  customColor: '',
  colorPalette: 'default HKS_colors'
});
function onCustomColorChange(event) {
  store.set({
    customColor: event.target.value
  });
}
function onColorPaletteChange(event) {
  store.set({
    colorPalette: event.target.value
  });
}
(0, _react2.storiesOf)('ColorPalettes', module).add('boxed component with multiple color palettes', function () {
  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
    store: store
  }, function (state) {
    return [/*#__PURE__*/_react["default"].createElement(_index["default"], {
      boxed: true,
      colorPalettes: colorPalettes,
      onColorPaletteChange: onColorPaletteChange,
      key: 1,
      colorPaletteIdentifier: state.colorPalette,
      customColor: state.customColor,
      onCustomColorChange: onCustomColorChange
    })];
  });
}).add('unboxed component with only one color palette', function () {
  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
    store: store
  }, function (state) {
    return [/*#__PURE__*/_react["default"].createElement(_index["default"], {
      colorPalettes: colorPalette,
      colorPaletteIdentifier: state.colorPalette,
      key: 2,
      customColor: state.customColor,
      onCustomColorChange: onCustomColorChange
    })];
  });
});