import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import React, { useState } from 'react';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import PropTypes from 'prop-types';
import useMobile from '../hooks/use-mobile';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function TableTip({
  title,
  tooltipTitle,
  link
}) {
  const {
    t
  } = useLocaleContext();
  const isMobile = useMobile();
  const [open, setOpen] = useState(false);
  const handleClick = () => setOpen(v => !v);
  const handleClose = () => setOpen(false);
  if (isMobile) {
    return /*#__PURE__*/_jsxs(Box, {
      sx: {
        color: 'text.secondary',
        fontSize: '14px',
        lineHeight: 1.5
      },
      children: [title, /*#__PURE__*/_jsx(ClickAwayListener, {
        onClickAway: handleClose,
        children: /*#__PURE__*/_jsx("span", {
          children: /*#__PURE__*/_jsx(Tooltip, {
            open: open,
            onClose: handleClose,
            disableFocusListener: true,
            disableHoverListener: true,
            disableTouchListener: true,
            title: /*#__PURE__*/_jsxs(Box, {
              sx: {
                fontSize: '14px',
                lineHeight: 1.5
              },
              children: [tooltipTitle, /*#__PURE__*/_jsx(Box, {
                sx: {
                  color: 'primary.main',
                  ml: 0.5
                },
                component: "a",
                href: link,
                target: "_blank",
                rel: "noopener noreferrer",
                children: t('dashboard.document')
              })]
            }),
            children: /*#__PURE__*/_jsx(IconButton, {
              size: "small",
              onClick: handleClick,
              sx: {
                ml: 0.5
              },
              children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
                fontSize: "14"
              })
            })
          })
        })
      })]
    });
  }
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      color: 'text.secondary',
      fontSize: '14px',
      lineHeight: 1.5
    },
    children: [title, /*#__PURE__*/_jsx(Tooltip, {
      enterTouchDelay: 0,
      leaveTouchDelay: 3000,
      title: /*#__PURE__*/_jsxs(Box, {
        sx: {
          fontSize: '14px',
          lineHeight: 1.5
        },
        children: [tooltipTitle, /*#__PURE__*/_jsx(Box, {
          sx: {
            color: 'primary.main',
            ml: 0.5
          },
          component: "a",
          href: link,
          target: "_blank",
          rel: "noopener noreferrer",
          children: t('dashboard.document')
        })]
      }),
      children: /*#__PURE__*/_jsx(IconButton, {
        size: "small",
        sx: {
          ml: 0.5
        },
        children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
          fontSize: "14"
        })
      })
    })]
  });
}
TableTip.propTypes = {
  title: PropTypes.string.isRequired,
  tooltipTitle: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired
};
export default TableTip;