import PropTypes from 'prop-types';
import CloseIcon from '@mui/icons-material/Close';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import Divider from '@mui/material/Divider';
import RelativeTime from '@arcblock/ux/lib/RelativeTime';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { fromAppDid } from '@arcblock/did-ext';
import Avatar from '@arcblock/ux/lib/Avatar';
import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
import { useTeamContext } from '../../contexts/team';
import { ScopeChips, useClientLogo } from './component';
import ClickToCopy from '../../click-to-copy';
import { renderUser } from '../../team/passports/new/passport-item';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function InfoGroup({
  title,
  items
}) {
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      mb: 3
    },
    children: [/*#__PURE__*/_jsx(Typography, {
      variant: "h6",
      sx: {
        mb: 1.5
      },
      children: title
    }), /*#__PURE__*/_jsx(Stack, {
      spacing: 1.5,
      children: items.map(({
        label,
        value
      }) => /*#__PURE__*/_jsxs(Box, {
        sx: {
          display: 'flex',
          alignItems: 'center',
          gap: 2
        },
        children: [/*#__PURE__*/_jsx(Typography, {
          variant: "subtitle2",
          color: "textSecondary",
          sx: {
            minWidth: 200
          },
          children: label
        }), /*#__PURE__*/_jsx(Typography, {
          sx: {
            wordBreak: 'break-all'
          },
          children: value || '-'
        })]
      }, label))
    })]
  });
}
InfoGroup.propTypes = {
  title: PropTypes.string.isRequired,
  items: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string.isRequired,
    value: PropTypes.any
  })).isRequired
};
export default function OauthClientDetail({
  client,
  onClose
}) {
  const {
    t,
    locale
  } = useLocaleContext();
  const {
    teamDid
  } = useTeamContext();
  const {
    clientName,
    clientId,
    clientSecret,
    redirectUris,
    scope,
    clientUri,
    logoUri,
    contacts,
    tosUri,
    policyUri,
    jwksUri,
    jwks,
    softwareId,
    softwareVersion,
    clientIdIssuedAt,
    clientSecretExpiresAt,
    updatedAt,
    createUser
  } = client;
  const {
    clientLogoUrl
  } = useClientLogo(logoUri);
  const getEndpoint = pathname => {
    try {
      const url = new URL(window.blocklet.appUrl);
      url.pathname = pathname;
      return url.toString();
    } catch (error) {
      return '-';
    }
  };
  const wallet = fromAppDid(clientId, teamDid);
  const groups = [{
    title: t('common.baseInfo'),
    items: [{
      label: t('oauth.client.name'),
      value: clientName
    }, {
      label: t('oauth.client.logoUri'),
      value: /*#__PURE__*/_jsx(Avatar, {
        variant: "rounded",
        shape: "square",
        src: clientLogoUrl,
        did: wallet.address,
        size: 64
      })
    }, {
      label: t('oauth.client.clientUri'),
      value: clientUri ? /*#__PURE__*/_jsx(ClickToCopy, {
        children: clientUri
      }) : '-'
    }, {
      label: t('oauth.client.clientId'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: clientId
      })
    }, {
      label: t('oauth.client.clientSecret'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: clientSecret
      })
    }, {
      label: t('oauth.client.redirectUris'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: (redirectUris || []).join(', ')
      })
    }, {
      label: t('oauth.client.scope'),
      value: /*#__PURE__*/_jsx(ScopeChips, {
        scope: scope
      })
    }, {
      label: t('oauth.client.createUser'),
      value: createUser ? renderUser(createUser, true) : t('oauth.client.openRegistration')
    }]
  }, {
    title: t('oauth.client.oauthEndpoints'),
    items: [{
      label: t('oauth.client.openidConfiguration'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: getEndpoint('/.well-known/openid-configuration')
      })
    }, {
      label: t('oauth.client.authorizationEndpoint'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: getEndpoint(`${WELLKNOWN_SERVICE_PATH_PREFIX}/oauth/authorize`)
      })
    }, {
      label: t('oauth.client.tokenEndpoint'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: getEndpoint(`${WELLKNOWN_SERVICE_PATH_PREFIX}/oauth/token`)
      })
    }, {
      label: t('oauth.client.userinfoEndpoint'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: getEndpoint(`${WELLKNOWN_SERVICE_PATH_PREFIX}/oauth/userinfo`)
      })
    }, {
      label: t('oauth.client.jwksUri'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: getEndpoint(`${WELLKNOWN_SERVICE_PATH_PREFIX}/oauth/jwks`)
      })
    }, {
      label: t('oauth.client.registrationEndpoint'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: getEndpoint(`${WELLKNOWN_SERVICE_PATH_PREFIX}/oauth/register`)
      })
    }, {
      label: t('oauth.client.endSessionEndpoint'),
      value: /*#__PURE__*/_jsx(ClickToCopy, {
        children: getEndpoint(`${WELLKNOWN_SERVICE_PATH_PREFIX}/oauth/logout`)
      })
    }]
  }, {
    title: t('oauth.client.metaContact'),
    items: [{
      label: t('oauth.client.contacts'),
      value: contacts.length ? /*#__PURE__*/_jsx(ClickToCopy, {
        children: (contacts || []).join(', ')
      }) : '-'
    }, {
      label: t('oauth.client.tosUri'),
      value: tosUri ? /*#__PURE__*/_jsx(ClickToCopy, {
        children: tosUri
      }) : '-'
    }, {
      label: t('oauth.client.policyUri'),
      value: policyUri ? /*#__PURE__*/_jsx(ClickToCopy, {
        children: policyUri
      }) : '-'
    }, {
      label: t('oauth.client.jwksUri'),
      value: jwksUri
    }, {
      label: t('oauth.client.jwks'),
      value: jwks
    }, {
      label: t('oauth.client.softwareId'),
      value: softwareId
    }, {
      label: t('oauth.client.softwareVersion'),
      value: softwareVersion
    }]
  }, {
    title: t('common.timeInfo'),
    items: [{
      label: t('oauth.client.clientIdIssuedAt'),
      value: clientIdIssuedAt ? /*#__PURE__*/_jsx(RelativeTime, {
        value: clientIdIssuedAt * 1000,
        type: "all",
        locale: locale
      }) : '-'
    }, {
      label: t('oauth.client.clientSecretExpiresAt'),
      value: clientSecretExpiresAt ? /*#__PURE__*/_jsx(RelativeTime, {
        value: clientSecretExpiresAt * 1000,
        type: "all",
        locale: locale
      }) : '-'
    }, {
      label: t('common.updatedAt'),
      value: updatedAt ? /*#__PURE__*/_jsx(RelativeTime, {
        value: updatedAt,
        type: "all",
        locale: locale
      }) : '-'
    }]
  }].filter(Boolean);
  return /*#__PURE__*/_jsxs(Dialog, {
    open: true,
    onClose: onClose,
    maxWidth: "lg",
    fullWidth: true,
    children: [/*#__PURE__*/_jsxs(DialogTitle, {
      children: [t('oauth.client.oauthAppDetails'), /*#__PURE__*/_jsx(IconButton, {
        onClick: onClose,
        sx: {
          position: 'absolute',
          right: 8,
          top: 8
        },
        children: /*#__PURE__*/_jsx(CloseIcon, {})
      })]
    }), /*#__PURE__*/_jsx(DialogContent, {
      children: /*#__PURE__*/_jsx(Box, {
        sx: {
          mt: 1
        },
        children: groups.map((g, i) => /*#__PURE__*/_jsxs(Box, {
          children: [/*#__PURE__*/_jsx(InfoGroup, {
            title: g.title,
            items: g.items
          }), i !== groups.length - 1 && /*#__PURE__*/_jsx(Divider, {
            sx: {
              my: 2
            }
          })]
        }, g.title))
      })
    })]
  });
}
OauthClientDetail.propTypes = {
  client: PropTypes.object.isRequired,
  onClose: PropTypes.func.isRequired
};