import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
import InfoRow from '@arcblock/ux/lib/InfoRow';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Typography, Box, Stack, useTheme, useMediaQuery } from '@mui/material';
import PropTypes from 'prop-types';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function DNSTip({
  domain = '',
  resolvedTarget,
  ...rest
}) {
  const {
    t,
    locale
  } = useLocaleContext();
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      backgroundColor: 'rgb(236, 251, 253)',
      borderColor: 'rgb(236, 251, 253)',
      borderRadius: '8px',
      padding: '12px'
    },
    ...rest,
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        flexWrap: 'wrap'
      },
      children: [t('router.domain.setup.tipStart'), domain && /*#__PURE__*/_jsx(Box, {
        sx: {
          mx: 0.5,
          color: 'primary.main',
          fontWeight: 'fontWeightBold'
        },
        children: domain
      }), t('router.domain.setup.tipEnd'), ":"]
    }), /*#__PURE__*/_jsxs(Stack, {
      sx: {
        gap: 0.5,
        '&>div': {
          mb: 0
        },
        marginTop: '12px'
      },
      children: [/*#__PURE__*/_jsx(Tip, {
        label: t('router.domain.setup.recordType'),
        value: "CNAME",
        locale: locale
      }), /*#__PURE__*/_jsx(Tip, {
        label: t('router.domain.setup.recordValue'),
        value: resolvedTarget,
        locale: locale
      })]
    })]
  });
}
DNSTip.propTypes = {
  domain: PropTypes.string,
  resolvedTarget: PropTypes.string.isRequired
};
function Tip({
  locale,
  label,
  value
}) {
  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
  const theme = useTheme();
  return /*#__PURE__*/_jsx(InfoRow, {
    name: label,
    nameWidth: 120,
    children: /*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        alignItems: 'center',
        lineHeight: 1
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        component: "span",
        sx: [{
          color: 'primary.main',
          overflow: 'auto'
        }, isMobile ? {
          maxWidth: '95%',
          wordWrap: 'break-word'
        } : {
          wordWrap: 'break-word'
        }],
        children: value
      }), /*#__PURE__*/_jsx(CopyButton, {
        content: value,
        locale: locale,
        style: {
          marginLeft: '4px',
          color: theme.palette.text.secondary
        }
      })]
    })
  });
}
Tip.propTypes = {
  locale: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired
};