import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/web.timers.js";
import { useEffect, useState } from 'react';
import { LatestButton } from '.';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var meta = {
  title: 'Components/LatestButton',
  tags: ['autodocs'],
  component: LatestButton,
  args: {
    styles: {
      display: 'flex'
    }
  },
  argTypes: {}
};
export var Doc = function Doc(props) {
  var styles = props.styles;
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    basicVisible = _useState2[0],
    setBasicVisible = _useState2[1];
  var handleChange = function handleChange(val) {
    if (!val) {
      setBasicVisible(false);
    }
  };
  useEffect(function () {
    if (!basicVisible) {
      var timerId = setTimeout(function () {
        setBasicVisible(true);
        clearTimeout(timerId);
      }, 2 * 1000);
    }
  }, [basicVisible]);
  return /*#__PURE__*/_jsxs("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      padding: 50,
      border: 'solid 0.5px #e5e7eb'
    },
    children: [/*#__PURE__*/_jsx("span", {
      children: "Basic: \u9876\u90E8"
    }), /*#__PURE__*/_jsx("div", {
      style: {
        width: 200,
        marginBottom: 50,
        minHeight: 100,
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        border: '1px solid gray'
      },
      children: /*#__PURE__*/_jsx(LatestButton, {
        txt: "32 New Message(s)",
        iconTransform: true,
        direction: "top"
      })
    }), /*#__PURE__*/_jsx("span", {
      style: {
        height: 30
      },
      children: "Basic: \u5E95\u90E8"
    }), /*#__PURE__*/_jsx("div", {
      style: {
        width: 200,
        minHeight: 100,
        marginBottom: 50,
        display: 'flex',
        flexDirection: 'column',
        border: '1px solid gray',
        position: 'relative'
      },
      children: /*#__PURE__*/_jsx(LatestButton, {
        txt: "32 New Message(s)"
      })
    }), /*#__PURE__*/_jsx("span", {
      style: {
        height: 30
      },
      children: "Basic: \u5E95\u90E8"
    }), /*#__PURE__*/_jsx("div", {
      style: {
        width: 200,
        minHeight: 100,
        marginBottom: 50,
        display: 'flex',
        flexDirection: 'column',
        border: '1px solid gray',
        position: 'relative'
      },
      children: /*#__PURE__*/_jsx(LatestButton, {
        txt: "\u56DE\u5230\u6700\u65B0\u4F4D\u7F6E"
      })
    })]
  });
};
export default meta;