import PropTypes from 'prop-types';
import InfoRow from '@arcblock/ux/lib/InfoRow';
import pull from 'lodash/pull';
import noop from 'lodash/noop';
import isEmpty from 'lodash/isEmpty';
import { getDidDomainForBlocklet } from '@abtnode/util/lib/get-domain-for-blocklet';
import { useContext, useImperativeHandle } from 'react';
import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
import { useTheme } from '@arcblock/ux/lib/Theme';
import { Box, Button, CircularProgress, SvgIcon } from '@mui/material';
import Address from '@arcblock/did-connect-react/lib/Address';
import Dialog from '@arcblock/ux/lib/Dialog';
import StarsIcon from '@mui/icons-material/Stars';
import { joinURL } from 'ufo';
import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
import { useBlockletContext } from '../../../contexts/blocklet';
import { useNodeContext } from '../../../contexts/node';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function FederatedDetailDialog({
  ref = null
}) {
  const {
    t
  } = useContext(LocaleContext);
  const {
    blocklet
  } = useBlockletContext();
  const {
    api
  } = useNodeContext();
  const state = useReactive({
    loadingReject: false,
    loadingApprove: false,
    mode: 'view',
    show: false,
    data: {},
    callback: noop
  });
  const theme = useTheme();
  const leavingScreen = theme?.transitions?.duration?.leavingScreen || 300;
  const reset = useMemoizedFn(() => {
    state.mode = 'view';
    state.data = {};
    state.callback = noop;
  }, []);
  const close = useMemoizedFn(() => {
    state.show = false;
    setTimeout(() => {
      reset();
    }, leavingScreen);
  }, []);
  const open = useMemoizedFn(data => {
    state.mode = 'view';
    state.show = true;
    state.data = data;
  }, []);
  const approve = useMemoizedFn((data, callback = noop) => {
    state.mode = 'approve';
    state.show = true;
    state.data = data;
    state.callback = callback;
  }, []);
  useImperativeHandle(ref, () => ({
    open,
    close,
    approve
  }), [open, close, approve]);
  const infoList = useCreation(() => {
    if (!state.show) {
      return [];
    }
    state.data.migratedFrom = [state.data.appId, state.data.appPid];
    const keys = ['appName', 'appLogo', 'appId', 'appPid', 'migratedFrom', 'appDescription', 'appUrl', 'version', 'appliedAt', 'status', 'serverId', 'serverVersion'];
    if (state.data.isMaster !== false) {
      pull(keys, 'appliedAt', 'status');
    }
    return keys.map(key => {
      const name = t(`federated.info.${key}`);
      let value = state.data[key];
      if (key === 'appName') {
        if (state.data.isMaster) {
          value = /*#__PURE__*/_jsxs(Box, {
            children: [/*#__PURE__*/_jsx(SvgIcon, {
              component: StarsIcon
            }), value]
          });
        }
      }
      if (['appId', 'appPid', 'serverId'].includes(key)) {
        value = /*#__PURE__*/_jsx(Address, {
          children: value
        });
      }
      if (['appUrl'].includes(key)) {
        value = /*#__PURE__*/_jsx(Box, {
          component: "a",
          href: value,
          target: "_blank",
          children: value
        });
      }
      if (['appLogo'].includes(key)) {
        const logoUrl = joinURL(`https://${getDidDomainForBlocklet({
          did: state.data.appPid
        })}`, WELLKNOWN_SERVICE_PATH_PREFIX, '/blocklet/logo');
        try {
          const logoUrlInstance = new URL(logoUrl);
          logoUrlInstance.searchParams.set('imageFilter', 'resize');
          // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
          logoUrlInstance.searchParams.set('w', '80');
          logoUrlInstance.searchParams.set('h', '80');
          value = /*#__PURE__*/_jsx("img", {
            src: logoUrlInstance.href,
            width: "60",
            height: "60",
            alt: state.data.appName
          });
        } catch {
          value = /*#__PURE__*/_jsx("img", {
            src: logoUrl,
            width: "60",
            height: "60",
            alt: state.data.appName
          });
        }
      }
      if (key === 'status') {
        value = value && t(`federated.status.${value}`);
      }
      if (key === 'migratedFrom') {
        const migratedFrom = state.data.migratedFrom || [];
        const filterDids = migratedFrom.filter(item => ![state.data.appId, state.data.appPid].includes(item));
        value = filterDids.map(item => /*#__PURE__*/_jsx(Address, {
          children: item
        }));
      }
      if (isEmpty(value)) {
        value = '-';
      }
      return {
        name,
        value
      };
    });
  }, [state.data]);
  const isApprove = state.mode === 'approve';
  const onReject = useMemoizedFn(async () => {
    try {
      state.loadingReject = true;
      await api.auditFederatedLogin({
        input: {
          memberPid: state.data.appPid,
          did: blocklet.appPid,
          status: 'rejected'
        }
      });
      close();
      state?.callback(false);
    } finally {
      state.loadingReject = false;
    }
  });
  const onApprove = useMemoizedFn(async () => {
    try {
      state.loadingApprove = true;
      await api.auditFederatedLogin({
        input: {
          memberPid: state.data.appPid,
          did: blocklet.appPid,
          status: 'approved'
        }
      });
      close();
      state?.callback(true);
    } finally {
      state.loadingApprove = false;
    }
  });
  return /*#__PURE__*/_jsx(Dialog, {
    open: state.show,
    title: isApprove ? t('federated.approveToJoinLogin') : t('federated.siteDetail'),
    onClose: close,
    actions: isApprove ? /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsxs(Button, {
        color: "error",
        variant: "contained",
        onClick: onReject,
        disabled: state.loadingReject,
        children: [state.loadingReject ? /*#__PURE__*/_jsx(CircularProgress, {
          size: 16,
          color: "grey"
        }) : null, t('common.reject')]
      }), /*#__PURE__*/_jsxs(Button, {
        variant: "contained",
        onClick: onApprove,
        disabled: state.loadingApprove,
        children: [state.loadingApprove ? /*#__PURE__*/_jsx(CircularProgress, {
          size: 16,
          color: "grey"
        }) : null, t('common.approve')]
      })]
    }) : /*#__PURE__*/_jsx(Button, {
      variant: "outlined",
      onClick: close,
      children: t('common.close')
    }),
    children: infoList.map(row => /*#__PURE__*/_jsx(InfoRow, {
      style: {
        alignItems: 'flex-start'
      },
      valueComponent: "div",
      nameWidth: 180,
      name: row.name,
      children: row.value
    }, row.name))
  });
}
FederatedDetailDialog.propTypes = {
  ref: PropTypes.any
};