import React from 'react';
import PropTypes from 'prop-types';
import isUrl from 'is-url';
import trimEnd from 'lodash/trimEnd';
import { useTheme } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import Box from '@mui/material/Box';
import ExternalLink from '@mui/material/Link';
import IconButton from '@mui/material/IconButton';
import Avatar from '@mui/material/Avatar';
import LockIcon from '@arcblock/icons/lib/LockIcon';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { ROUTING_RESPONSE_TYPES, ROUTING_RULE_TYPES } from '@abtnode/constant';
import { getDisplayName } from '@blocklet/meta/lib/util';
import { TextSnippetOutlined } from '@mui/icons-material';
import { getBlockletUrlParams, getAccessUrl, BlockletAdminRoles } from '../../util';
import { useBlockletContext } from '../../contexts/blocklet';
import { useNodeContext } from '../../contexts/node';
import { withPermission } from '../../permission';
import Line from '../component/line';
import RuleActions from './rule-actions';
import BlockletPageGroup from '../page-group';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function RedirectRule({
  domain,
  isHttps = false,
  toUrl
}) {
  const scheme = isHttps ? 'https' : 'http';
  let tmpToUrl = toUrl;
  if (!isUrl(tmpToUrl)) {
    tmpToUrl = `${scheme}://${domain}${toUrl}`;
  }
  return /*#__PURE__*/_jsx(ExternalLink, {
    href: tmpToUrl,
    target: "_blank",
    style: {
      fontSize: 14
    },
    underline: "hover",
    children: toUrl
  }, tmpToUrl);
}
RedirectRule.propTypes = {
  domain: PropTypes.string.isRequired,
  toUrl: PropTypes.string.isRequired,
  isHttps: PropTypes.bool
};
function RuleList({
  hasPermission = false
}) {
  const {
    t,
    locale
  } = useLocaleContext();
  const theme = useTheme();
  const {
    blocklet,
    recommendedDomain: domain
  } = useBlockletContext();
  const rules = blocklet.site.rules.filter(rule => rule.to.type !== ROUTING_RULE_TYPES.BLOCKLET);
  return rules.map(rule => {
    let avatar = null;
    let component = null;
    if (rule.to.type === ROUTING_RULE_TYPES.NONE) {
      avatar = '404';
    } else if (rule.to.type === ROUTING_RULE_TYPES.REDIRECT) {
      avatar = rule.to.redirectCode;
    } else if (rule.to.type === ROUTING_RULE_TYPES.GENERAL_REWRITE) {
      avatar = 'R';
    } else if (rule.to.type === ROUTING_RULE_TYPES.DIRECT_RESPONSE) {
      avatar = /*#__PURE__*/_jsx(TextSnippetOutlined, {
        sx: {
          color: 'text.secondary',
          fontSize: '45px'
        }
      });
    } else if (rule.to.type === ROUTING_RULE_TYPES.COMPONENT) {
      component = blocklet.children.find(x => x.meta.did === rule.to.componentId);
      avatar = 'C';
    }
    const action = rule.isProtected ? /*#__PURE__*/_jsx(Tooltip, {
      title: t('blocklet.router.urlLockTooltip'),
      placement: "top",
      children: /*#__PURE__*/_jsx("span", {
        children: /*#__PURE__*/_jsx(IconButton, {
          disabled: true,
          size: "small",
          style: {
            pointerEvents: 'auto',
            // padding replace to margin, fix the tooltip position
            paddingTop: 0,
            paddingBottom: 0,
            margin: '12px 0'
          },
          children: /*#__PURE__*/_jsx(LockIcon, {
            style: {
              fill: theme.palette.text.disabled
            }
          })
        })
      })
    }) : /*#__PURE__*/_jsx(RuleActions, {
      ...rule
    });
    return [/*#__PURE__*/_jsxs(Box, {
      className: "component-item",
      sx: {
        display: 'flex',
        py: 2,
        justifyContent: 'space-between',
        alignItems: 'center'
      },
      children: [/*#__PURE__*/_jsxs(Box, {
        sx: {
          width: {
            xs: 300,
            md: 400
          },
          display: 'flex',
          alignItems: 'center'
        },
        children: [/*#__PURE__*/_jsx(Box, {
          className: "component-item__indent",
          sx: {
            width: 28
          }
        }), typeof avatar === 'object' ? avatar : /*#__PURE__*/_jsx(Avatar, {
          children: avatar
        }), /*#__PURE__*/_jsxs(Box, {
          sx: {
            ml: 2,
            flex: 1,
            wordBreak: 'break-word'
          },
          children: [/*#__PURE__*/_jsxs(Box, {
            style: {
              color: 'text.primary',
              fontSize: 16
            },
            children: [rule.to.type === ROUTING_RULE_TYPES.NONE && t('common.page404'), rule.to.type === ROUTING_RULE_TYPES.REDIRECT && t('common.redirect'), rule.to.type === ROUTING_RULE_TYPES.GENERAL_REWRITE && t('common.rewrite'), rule.to.type === ROUTING_RULE_TYPES.DIRECT_RESPONSE && ROUTING_RESPONSE_TYPES.find(x => x.value === rule.to.response.contentType)?.text, rule.to.type === ROUTING_RULE_TYPES.COMPONENT && getDisplayName(component, true)]
          }), /*#__PURE__*/_jsxs(Box, {
            sx: {
              display: 'flex',
              alignItems: 'center'
            },
            children: [rule.to.type === ROUTING_RULE_TYPES.REDIRECT && /*#__PURE__*/_jsx(RedirectRule, {
              domain: domain,
              toUrl: rule.to.url
            }), rule.to.type === ROUTING_RULE_TYPES.GENERAL_REWRITE && /*#__PURE__*/_jsx(RedirectRule, {
              domain: domain,
              toUrl: rule.to.url
            }), rule.to.type === ROUTING_RULE_TYPES.COMPONENT && /*#__PURE__*/_jsx(BlockletPageGroup, {
              group: rule.to.pageGroup
            })]
          })]
        })]
      }), /*#__PURE__*/_jsx(Box, {
        sx: {
          px: 2,
          alignItems: 'center',
          flexGrow: '1',
          display: {
            xs: 'none',
            md: 'flex'
          }
        },
        children: /*#__PURE__*/_jsx(ExternalLink, {
          href: getAccessUrl(domain, rule.from.pathPrefix, getBlockletUrlParams(blocklet, locale)),
          target: "_blank",
          style: {
            fontSize: 16,
            color: 'inherit'
          },
          underline: "hover",
          children: trimEnd(rule.from.pathPrefix, '/') || '/'
        })
      }, rule.from.pathPrefix), /*#__PURE__*/_jsx(Box, {
        children: hasPermission && /*#__PURE__*/_jsx("div", {
          style: {
            textAlign: 'right'
          },
          children: action
        })
      }, "actions")]
    }, "rule"), /*#__PURE__*/_jsx(Line, {}, "divider")];
  });
}
RuleList.propTypes = {
  hasPermission: PropTypes.bool
};
const RuleListInDaemon = withPermission(RuleList, 'mutate_blocklets');
const RuleListInService = withPermission(RuleList, '', BlockletAdminRoles);
export default function RuleListWithPermission(props) {
  const {
    inService
  } = useNodeContext();
  if (inService) {
    return /*#__PURE__*/_jsx(RuleListInService, {
      ...props
    });
  }
  return /*#__PURE__*/_jsx(RuleListInDaemon, {
    ...props
  });
}