"use strict";

require("core-js/modules/es.object.define-property.js");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Doc = void 0;
require("core-js/modules/web.timers.js");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _ = require(".");
var _type = require("../icon/type");
var _iconText = require("../icon-text");
var _jsxRuntime = require("react/jsx-runtime");
var meta = {
  title: 'Components/TextBubble',
  tags: ['autodocs'],
  component: _.TextBubble,
  args: {
    styles: {
      display: 'flex'
    }
  },
  argTypes: {}
};
var Doc = exports.Doc = function Doc(props) {
  var styles = props.styles;
  var _useState = (0, _react.useState)(true),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    basicVisible = _useState2[0],
    setBasicVisible = _useState2[1];
  var handleChange = function handleChange(val) {
    if (!val) {
      setBasicVisible(false);
    }
  };
  (0, _react.useEffect)(function () {
    if (!basicVisible) {
      var timerId = setTimeout(function () {
        setBasicVisible(true);
        clearTimeout(timerId);
      }, 2 * 1000);
    }
  }, [basicVisible]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      padding: 50,
      border: 'solid 0.5px #e5e7eb'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        width: 200,
        marginBottom: 50,
        display: 'flex',
        flexDirection: 'column'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        style: {
          marginBottom: 10
        },
        children: "Basic: none bg"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextBubble, {
        txt: "12:30 AM",
        type: "transparent",
        bold: true,
        lineHeight: "small"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        width: 200,
        marginBottom: 50,
        display: 'flex',
        flexDirection: 'column'
      },
      children: ["Basic: bg-gray", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextBubble, {
        txt: "\u4E3B\u6301\u4EBA(\u6211) \u5F00\u542F\u4E86\u804A\u5929\u5BA4\u7981\u8A00",
        type: "gray",
        lineHeight: "large",
        marginBottom: 15
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        width: 300,
        marginBottom: 50,
        display: 'flex',
        flexDirection: 'column'
      },
      children: ["Icon Text & bg-gray_2:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextBubble, {
        styles: {
          minWidth: 312,
          maxHeight: 37
        },
        txt: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconText.IconText, {
          icon: _type.FcrIconType.FCR_SETTING_NONE,
          colors: {
            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
          },
          txt: "\u5168\u4F53\u7981\u8A00"
        }),
        type: "gray_2",
        lineHeight: "large"
      })]
    })]
  });
};
var _default = exports["default"] = meta;