import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import React from 'react';
import { SearchLoupeIcon16Regular } from '@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular';
import { AttachLinkIcon16Regular } from '@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon16Regular';
import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
import { MinusCircleIcon16Regular } from '@skbkontur/icons/icons/MinusCircleIcon/MinusCircleIcon16Regular';
import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
import { QuestionCircleIcon16Regular } from '@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular';
import { Button } from "../../../components/Button";
import { Tabs } from "../../../components/Tabs";
import { Gapped } from "../../../components/Gapped";
import { Link } from "../../../components/Link";
import { Input } from "../../../components/Input";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { Tooltip } from "../../../components/Tooltip";
import { Sticky } from "../../../components/Sticky";
import { isTestEnv } from "../../../lib/currentEnvironment";
import { cx } from "../../../lib/theming/Emotion";
import { FileUploader } from "../../../components/FileUploader";
import { ThemeType } from "../constants";
import { TokenInputPlayground } from "../TokenInputPlayground";
import { DatePickerPlayground } from "../AnotherInputsPlayground";
import { TogglePlayground } from "../TogglePlayground";
import { SwitcherPlayground } from "../SwitcherPlayground";
import { FxInputPlayground } from "../FxInputPlayground";
import { CurrencyInputPlayground } from "../CurrencyInputPlayground";
import { getComponentsFromPropsList } from "../helpers";
import { CheckboxPlayground } from "../CheckboxPlayground";
import { RadioPlayground } from "../RadioPlayground";
import { PagingPlayground } from "../PagingPlayground";
import { HintPlayground } from "../HintPlayground";
import { ComponentsGroup } from "../ComponentsGroup";
import { styles } from "../Playground.styles";
import { SizesGroup } from "../SizesGroup";
var useSticky = !isTestEnv;
export var 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.createRef();
    _this.renderTabsGroup = function () {
      return useSticky ? /*#__PURE__*/
      React.createElement(Sticky, {
        side: 'top',
        getStop: _this.getStickyStop
      }, _this.renderTabs()) : _this.renderTabs();
    };
    _this.getCurrentTab = function () {
      switch (_this.props.currentThemeType) {
        case ThemeType.DarkTheme:
          return ThemeType.DarkTheme;
        default:
          return ThemeType.LightTheme;
      }
    };
    _this.renderSizesGroup = function () {
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Размеры',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(SizesGroup, {
          size: 'small'
        }), /*#__PURE__*/
        React.createElement(SizesGroup, {
          size: 'medium'
        }), /*#__PURE__*/
        React.createElement(SizesGroup, {
          size: 'large'
        }))
      );
    };
    _this.renderLinksGroup = function () {
      var propsList = [{
        icon: /*#__PURE__*/React.createElement(AttachLinkIcon16Regular, null),
        children: 'Enabled'
      }, {
        icon: /*#__PURE__*/React.createElement(CheckAIcon16Regular, null),
        use: 'success',
        children: 'Success'
      }, {
        icon: /*#__PURE__*/React.createElement(MinusCircleIcon16Regular, null),
        use: 'danger',
        children: 'Danger'
      }, {
        icon: /*#__PURE__*/React.createElement(TrashCanIcon16Regular, null),
        use: 'grayed',
        children: 'Grayed'
      }, {
        icon: /*#__PURE__*/React.createElement(TrashCanIcon16Regular, null),
        children: 'Disabled',
        disabled: true
      }];
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Ссылки',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(Gapped, {
          wrap: true,
          verticalAlign: "middle",
          gap: 10
        }, getComponentsFromPropsList( /*#__PURE__*/React.createElement(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.createElement(ComponentsGroup, {
          title: 'Кнопки',
          theme: _this.theme
        }, getComponentsFromPropsList( /*#__PURE__*/React.createElement(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 = getComponentsFromPropsList( /*#__PURE__*/React.createElement(Input, {
        width: 120
      }), propsList);
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Поле ввода',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(Input, {
          width: 380,
          prefix: "https://kontur.ru/search?query=",
          rightIcon: /*#__PURE__*/React.createElement(SearchLoupeIcon16Regular, null)
        }), /*#__PURE__*/
        React.createElement("div", null, /*#__PURE__*/
        React.createElement(Gapped, {
          gap: 10
        }, fromProps)))
      );
    };
    _this.renderTokenInputsGroup = function () {
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Поле с токеном',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(TokenInputPlayground, null))
      );
    };
    _this.renderOtherInputsGroup = function () {
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Прочие поля',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(CurrencyInputPlayground, null), /*#__PURE__*/
        React.createElement(FxInputPlayground, null), /*#__PURE__*/
        React.createElement(DatePickerPlayground, null))
      );
    };
    _this.renderSwitchersGroup = function () {
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Переключатели',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(SwitcherPlayground, null))
      );
    };
    _this.renderControlsGroup = function () {
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Радио, чекбоксы',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(Gapped, {
          verticalAlign: 'top',
          gap: 60
        }, /*#__PURE__*/
        React.createElement(CheckboxPlayground, null), /*#__PURE__*/
        React.createElement(RadioPlayground, null), /*#__PURE__*/
        React.createElement(TogglePlayground, null)))
      );
    };
    _this.renderHintsGroup = function () {
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Тултип',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(HintPlayground, null))
      );
    };
    _this.renderTooltip = function () {
      var tooltipContent = function tooltipContent() {
        return /*#__PURE__*/(
          React.createElement("div", {
            className: styles.tooltipContent()
          }, 'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно')
        );
      };
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Тултип',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(Tooltip, {
          render: tooltipContent,
          pos: "right middle",
          trigger: 'opened',
          disableAnimations: true
        }, /*#__PURE__*/
        React.createElement(Link, {
          icon: /*#__PURE__*/React.createElement(QuestionCircleIcon16Regular, null)
        })))
      );
    };
    _this.renderPaging = function () {
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'Пейджинг',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(PagingPlayground, null))
      );
    };
    _this.renderFileUploader = function () {
      return /*#__PURE__*/(
        React.createElement(ComponentsGroup, {
          title: 'FileUploader',
          theme: _this.theme
        }, /*#__PURE__*/
        React.createElement(FileUploader, {
          multiple: true
        }))
      );
    };
    _this.renderStickyStopElement = function () {
      return /*#__PURE__*/React.createElement("div", {
        ref: _this.stopEl,
        style: {
          height: 50
        }
      });
    };
    _this.getStickyStop = function () {
      return _this.stopEl.current;
    };
    return _this;
  }
  _inheritsLoose(Playground, _React$Component);
  var _proto = Playground.prototype;
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return _this2.renderMain();
    });
  };
  _proto.renderMain = function renderMain() {
    var wrapperClassName = cx(styles.playground(), styles.playgroundWrapper(this.theme));
    return /*#__PURE__*/React.createElement("div", {
      className: wrapperClassName
    }, /*#__PURE__*/React.createElement(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.createElement(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 = cx((_cx = {}, _cx[styles.tabsWrapper(this.theme)] = true, _cx[styles.stickyTabsWrapper(this.theme)] = useSticky, _cx));
    return /*#__PURE__*/React.createElement("div", {
      style: tabsOuterWrapperStyle,
      className: tabsOuterWrapperClass
    }, /*#__PURE__*/React.createElement(Gapped, {
      gap: 40
    }, /*#__PURE__*/React.createElement(Tabs, {
      value: this.getCurrentTab(),
      onValueChange: onThemeChange,
      vertical: false
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.tabsInnerWrapper(this.theme)
    }, /*#__PURE__*/React.createElement(Tabs.Tab, {
      id: ThemeType.LightTheme,
      "data-tab-id": ThemeType.LightTheme
    }, "\u0421\u0432\u0435\u0442\u043B\u0430\u044F \u0442\u0435\u043C\u0430"), /*#__PURE__*/React.createElement(Tabs.Tab, {
      id: ThemeType.DarkTheme,
      "data-tab-id": ThemeType.DarkTheme
    }, "\u0422\u0451\u043C\u043D\u0430\u044F \u0442\u0435\u043C\u0430"))), /*#__PURE__*/React.createElement(Link, {
      onClick: onEditLinkClick
    }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));
  };
  return Playground;
}(React.Component);