import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import PropTypes from 'prop-types';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme } from '@mui/material';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import Link from '@mui/material/Link';
import Copyable from '../../click-to-copy';
import { getDomainName } from './util';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function ExternalLink({
  children = null,
  href = '',
  sx = null,
  showIcon = false,
  ...props
}) {
  const theme = useTheme();
  return /*#__PURE__*/_jsxs(Link, {
    href: href,
    target: "_blank",
    ...props,
    sx: {
      display: 'inline-flex',
      alignItems: 'center',
      color: 'text.primary',
      ':hover': {
        color: theme.palette.primary.main
      },
      ...sx
    },
    children: [children, showIcon && /*#__PURE__*/_jsx(OpenInNewIcon, {
      fontSize: "small",
      sx: {
        ml: '4px',
        fontSize: '1rem'
      }
    })]
  });
}
ExternalLink.propTypes = {
  children: PropTypes.node,
  sx: PropTypes.object,
  href: PropTypes.string,
  showIcon: PropTypes.bool
};
function DnsRecords({
  records
}) {
  return /*#__PURE__*/_jsx(TableContainer, {
    component: Box,
    sx: {
      '.MuiTableCell-root': {
        color: 'text.primary'
      }
    },
    children: /*#__PURE__*/_jsxs(Table, {
      children: [/*#__PURE__*/_jsx(TableHead, {
        children: /*#__PURE__*/_jsxs(TableRow, {
          children: [/*#__PURE__*/_jsx(TableCell, {
            children: "Type"
          }), /*#__PURE__*/_jsx(TableCell, {
            children: "Name"
          }), /*#__PURE__*/_jsx(TableCell, {
            children: "Data"
          })]
        })
      }), /*#__PURE__*/_jsx(TableBody, {
        children: records.map(record => /*#__PURE__*/_jsxs(TableRow, {
          children: [/*#__PURE__*/_jsx(TableCell, {
            children: record.type
          }), /*#__PURE__*/_jsx(TableCell, {
            children: record.name
          }), /*#__PURE__*/_jsx(TableCell, {
            sx: {
              wordBreak: 'break-word'
            },
            children: /*#__PURE__*/_jsx(Copyable, {
              children: record.data
            })
          })]
        }, record.name))
      })]
    })
  });
}
DnsRecords.propTypes = {
  records: PropTypes.array.isRequired
};
export default function DNSConfigure({
  url,
  domain = ''
}) {
  const {
    t
  } = useLocaleContext();
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      flexDirection: 'column',
      gap: 2
    },
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        flexDirection: 'column',
        gap: 1
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        component: "h3",
        variant: "h6",
        children: t('setting.dns.step1Title')
      }), /*#__PURE__*/_jsxs(Typography, {
        component: "section",
        children: [t('setting.dns.step1Desc1'), /*#__PURE__*/_jsx(ExternalLink, {
          href: "https://lookup.icann.org/",
          target: "_blank",
          children: "ICANN"
        })]
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        flexDirection: 'column',
        gap: 1
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        component: "h3",
        variant: "h6",
        children: t('setting.dns.step2Title', {
          url
        })
      }), /*#__PURE__*/_jsx(Typography, {
        component: "section",
        children: t('setting.dns.step2Desc')
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        flexDirection: 'column',
        gap: 1
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        component: "h3",
        variant: "h6",
        children: t('setting.dns.step3Title')
      }), /*#__PURE__*/_jsx(Typography, {
        component: "section",
        children: t('setting.dns.step3Desc')
      }), /*#__PURE__*/_jsx(DnsRecords, {
        records: [{
          type: 'CNAME',
          name: getDomainName(url),
          data: domain
        }]
      })]
    })]
  });
}
DNSConfigure.propTypes = {
  url: PropTypes.string.isRequired,
  domain: PropTypes.string
};