import React, { useState } from 'react';
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
import { Checkbox } from "../../../components/Checkbox";
import { Radio } from "../../../components/Radio";
import { FileUploader } from "../../../components/FileUploader";
import { Paging } from "../../../components/Paging";
import { getComponentsFromPropsList } from "../helpers";
var propsList = [{
  children: 'Semichecked',
  initialIndeterminate: true
}, {
  children: 'Checked',
  checked: true
}, {
  children: 'Checked & Focused',
  checked: true,
  focused: true
}];
export var UnlinkVarsPlayground = function UnlinkVarsPlayground() {
  var theme = ThemeFactory.create({
    borderColorFocus: '#7474DA',
    linkColor: '#0000cc'
  });
  var _useState = useState(3),
    active = _useState[0],
    setActive = _useState[1];
  return /*#__PURE__*/(
    React.createElement(ThemeContext.Provider, {
      value: theme
    }, /*#__PURE__*/
    React.createElement("div", {
      style: {
        display: 'grid',
        gap: '10px'
      }
    }, getComponentsFromPropsList( /*#__PURE__*/React.createElement(Checkbox, null), propsList), /*#__PURE__*/
    React.createElement(Paging, {
      activePage: active,
      pagesCount: 5,
      onPageChange: function onPageChange(num) {
        return setActive(num);
      }
    }), /*#__PURE__*/
    React.createElement(FileUploader, null), /*#__PURE__*/
    React.createElement(Radio, {
      value: 'foo',
      focused: true
    })))
  );
};