"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.Playground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
var _SearchLoupeIcon16Regular = require("@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular");
var _AttachLinkIcon16Regular = require("@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon16Regular");
var _CheckAIcon16Regular = require("@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular");
var _MinusCircleIcon16Regular = require("@skbkontur/icons/icons/MinusCircleIcon/MinusCircleIcon16Regular");
var _TrashCanIcon16Regular = require("@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular");
var _QuestionCircleIcon16Regular = require("@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular");


var _Button = require("../../components/Button");
var _Tabs = require("../../components/Tabs");
var _Gapped = require("../../components/Gapped");

var _Link = require("../../components/Link");

var _Input = require("../../components/Input");
var _ThemeContext = require("../../lib/theming/ThemeContext");
var _Tooltip = require("../../components/Tooltip");
var _Sticky = require("../../components/Sticky");

var _currentEnvironment = require("../../lib/currentEnvironment");
var _Emotion = require("../../lib/theming/Emotion");
var _FileUploader = require("../../components/FileUploader");

var _constants = require("./constants");
var _TokenInputPlayground = require("./TokenInputPlayground");
var _AnotherInputsPlayground = require("./AnotherInputsPlayground");
var _TogglePlayground = require("./TogglePlayground");
var _SwitcherPlayground = require("./SwitcherPlayground");
var _FxInputPlayground = require("./FxInputPlayground");
var _CurrencyInputPlayground = require("./CurrencyInputPlayground");
var _helpers = require("./helpers");
var _CheckboxPlayground = require("./CheckboxPlayground");
var _RadioPlayground = require("./RadioPlayground");
var _PagingPlayground = require("./PagingPlayground");
var _HintPlayground = require("./HintPlayground");
var _ComponentsGroup = require("./ComponentsGroup");
var _Playground2 = require("./Playground.styles");
var _SizesGroup = require("./SizesGroup");

var useSticky = !_currentEnvironment.isTestEnv;var







Playground = exports.Playground = /*#__PURE__*/function (_React$Component) {function Playground() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.

    stopEl = /*#__PURE__*/_react.default.createRef();_this.





































    renderTabsGroup = function () {
      return useSticky ? /*#__PURE__*/
      _react.default.createElement(_Sticky.Sticky, { side: 'top', getStop: _this.getStickyStop },
      _this.renderTabs()
      ) :

      _this.renderTabs();

    };_this.




























    getCurrentTab = function () {
      switch (_this.props.currentThemeType) {
        case _constants.ThemeType.DarkTheme:
          return _constants.ThemeType.DarkTheme;
        default:
          return _constants.ThemeType.LightTheme;
      }
    };_this.

    renderSizesGroup = function () {
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Размеры', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'small' }), /*#__PURE__*/
        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'medium' }), /*#__PURE__*/
        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'large' })
        ));

    };_this.

    renderLinksGroup = function () {
      var propsList = [
      { icon: /*#__PURE__*/_react.default.createElement(_AttachLinkIcon16Regular.AttachLinkIcon16Regular, null), children: 'Enabled' },
      { icon: /*#__PURE__*/_react.default.createElement(_CheckAIcon16Regular.CheckAIcon16Regular, null), use: 'success', children: 'Success' },
      { icon: /*#__PURE__*/_react.default.createElement(_MinusCircleIcon16Regular.MinusCircleIcon16Regular, null), use: 'danger', children: 'Danger' },
      { icon: /*#__PURE__*/_react.default.createElement(_TrashCanIcon16Regular.TrashCanIcon16Regular, null), use: 'grayed', children: 'Grayed' },
      { icon: /*#__PURE__*/_react.default.createElement(_TrashCanIcon16Regular.TrashCanIcon16Regular, null), children: 'Disabled', disabled: true }];

      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Ссылки', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "middle", gap: 10 },
        (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Link.Link, null), propsList)
        )
        ));

    };_this.

    renderButtonsGroup = function () {
      var propsList = [
      { children: 'Default' },
      { children: 'Primary', use: 'primary' },
      { children: 'Danger', use: 'danger' },
      { children: 'Pay', use: 'pay' },
      { children: 'Success', use: 'success' },
      { children: 'Disabled', disabled: true },
      { children: 'Back', arrow: 'left', size: 'medium', width: 110 },
      { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },
      { children: 'Loading', size: 'medium', loading: true }];


      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Кнопки', theme: _this.theme },
        (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Button.Button, { width: 120, size: 'small' }), propsList)
        ));

    };_this.

    renderInputsGroup = function () {
      var propsList = [
      { placeholder: 'Enabled' },
      { placeholder: 'Error', error: true },
      { placeholder: 'Warning', warning: true },
      { placeholder: 'Disabled', disabled: true }];

      var fromProps = (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Input.Input, { width: 120 }), propsList);
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле ввода', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_Input.Input, { width: 380, prefix: "https://kontur.ru/search?query=", rightIcon: /*#__PURE__*/_react.default.createElement(_SearchLoupeIcon16Regular.SearchLoupeIcon16Regular, null) }), /*#__PURE__*/
        _react.default.createElement("div", null, /*#__PURE__*/
        _react.default.createElement(_Gapped.Gapped, { gap: 10 }, fromProps)
        )
        ));

    };_this.

    renderTokenInputsGroup = function () {
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле с токеном', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_TokenInputPlayground.TokenInputPlayground, null)
        ));

    };_this.

    renderOtherInputsGroup = function () {
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Прочие поля', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_CurrencyInputPlayground.CurrencyInputPlayground, null), /*#__PURE__*/
        _react.default.createElement(_FxInputPlayground.FxInputPlayground, null), /*#__PURE__*/
        _react.default.createElement(_AnotherInputsPlayground.DatePickerPlayground, null)
        ));

    };_this.

    renderSwitchersGroup = function () {
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Переключатели', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_SwitcherPlayground.SwitcherPlayground, null)
        ));

    };_this.

    renderControlsGroup = function () {
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Радио, чекбоксы', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_Gapped.Gapped, { verticalAlign: 'top', gap: 60 }, /*#__PURE__*/
        _react.default.createElement(_CheckboxPlayground.CheckboxPlayground, null), /*#__PURE__*/
        _react.default.createElement(_RadioPlayground.RadioPlayground, null), /*#__PURE__*/
        _react.default.createElement(_TogglePlayground.TogglePlayground, null)
        )
        ));

    };_this.

    renderHintsGroup = function () {
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_HintPlayground.HintPlayground, null)
        ));

    };_this.

    renderTooltip = function () {
      var tooltipContent = function tooltipContent() {return /*#__PURE__*/(
          _react.default.createElement("div", { className: _Playground2.styles.tooltipContent() },
          'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'
          ));};

      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_Tooltip.Tooltip, { render: tooltipContent, pos: "right middle", trigger: 'opened', disableAnimations: true }, /*#__PURE__*/
        _react.default.createElement(_Link.Link, { icon: /*#__PURE__*/_react.default.createElement(_QuestionCircleIcon16Regular.QuestionCircleIcon16Regular, null) })
        )
        ));

    };_this.

    renderPaging = function () {
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Пейджинг', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_PagingPlayground.PagingPlayground, null)
        ));

    };_this.

    renderFileUploader = function () {
      return /*#__PURE__*/(
        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'FileUploader', theme: _this.theme }, /*#__PURE__*/
        _react.default.createElement(_FileUploader.FileUploader, { multiple: true })
        ));

    };_this.

    renderStickyStopElement = function () {
      return /*#__PURE__*/_react.default.createElement("div", { ref: _this.stopEl, style: { height: 50 } });
    };_this.

    getStickyStop = function () {return _this.stopEl.current;};return _this;}(0, _inheritsLoose2.default)(Playground, _React$Component);var _proto = Playground.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var wrapperClassName = (0, _Emotion.cx)(_Playground2.styles.playground(), _Playground2.styles.playgroundWrapper(this.theme));return /*#__PURE__*/_react.default.createElement("div", { className: wrapperClassName }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging(), this.renderFileUploader()));};_proto.renderTabs = function renderTabs() {var _cx;var _this$props = this.props,onThemeChange = _this$props.onThemeChange,onEditLinkClick = _this$props.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault, marginTop: 36 };var tabsOuterWrapperClass = (0, _Emotion.cx)((_cx = {}, _cx[_Playground2.styles.tabsWrapper(this.theme)] = true, _cx[_Playground2.styles.stickyTabsWrapper(this.theme)] = useSticky, _cx));return /*#__PURE__*/_react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 40 }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground2.styles.tabsInnerWrapper(this.theme) }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.LightTheme, "data-tab-id": _constants.ThemeType.LightTheme }, "\u0421\u0432\u0435\u0442\u043B\u0430\u044F \u0442\u0435\u043C\u0430"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.DarkTheme, "data-tab-id": _constants.ThemeType.DarkTheme }, "\u0422\u0451\u043C\u043D\u0430\u044F \u0442\u0435\u043C\u0430"))), /*#__PURE__*/_react.default.createElement(_Link.Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));};return Playground;}(_react.default.Component);