import React from 'react';
import PropTypes from 'prop-types';
import InfoRow from '@arcblock/ux/lib/InfoRow';
import Paper from '@mui/material/Paper';
import Button from '@mui/material/Button';
import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import DidAddress from '../../did-address';
import RegisterPasskey from '../passkeys/register';
import { useSessionContext } from '../../contexts/session';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function UserConnections({
  user,
  onChangeUser = () => {}
}) {
  const connectedAccounts = user.connectedAccounts || [];
  const {
    t
  } = useLocaleContext();
  const {
    session
  } = useSessionContext();
  const {
    disconnectPasskey
  } = session.usePasskey();
  const hasPasskey = connectedAccounts.some(account => account.provider === LOGIN_PROVIDER.PASSKEY && account.did);
  return /*#__PURE__*/_jsxs("div", {
    children: [connectedAccounts.map(account => {
      return /*#__PURE__*/_jsxs("div", {
        children: [/*#__PURE__*/_jsx(InfoRow, {
          style: {
            alignItems: 'flex-start',
            cursor: 'pointer'
          },
          valueComponent: "div",
          nameWidth: 120,
          name: account.provider,
          onClick: () => {
            const el = document.getElementById(`account-details-${account.did}`);
            if (el) {
              el.style.display = el.style.display === 'none' ? 'block' : 'none';
            }
          },
          children: /*#__PURE__*/_jsx(DidAddress, {
            did: account.did,
            showQrcode: true
          })
        }, account.did), /*#__PURE__*/_jsxs(Paper, {
          id: `account-details-${account.did}`,
          sx: {
            display: 'none',
            mt: -1,
            mb: 1,
            pt: 1,
            pl: 1,
            pr: 1,
            boxShadow: 'none',
            border: '1px solid #e0e0e0'
          },
          children: [account.did && /*#__PURE__*/_jsx(InfoRow, {
            nameWidth: 120,
            name: "DID",
            children: account.did
          }), account.pk && /*#__PURE__*/_jsx(InfoRow, {
            nameWidth: 120,
            name: "PublicKey",
            children: account.pk
          }), account.id && /*#__PURE__*/_jsx(InfoRow, {
            nameWidth: 120,
            name: "ID",
            children: account.id
          }), account.sub && /*#__PURE__*/_jsx(InfoRow, {
            nameWidth: 120,
            name: "Sub",
            children: account.sub
          }), account.lastLoginAt && /*#__PURE__*/_jsx(InfoRow, {
            nameWidth: 120,
            name: "Last Login",
            children: account.lastLoginAt
          }), account.counter && /*#__PURE__*/_jsx(InfoRow, {
            nameWidth: 120,
            name: "Counter",
            children: account.counter
          }), account.userInfo && /*#__PURE__*/_jsx(InfoRow, {
            nameWidth: 120,
            name: "User Info",
            children: /*#__PURE__*/_jsx("pre", {
              style: {
                margin: 0,
                fontSize: 12
              },
              children: JSON.stringify(account.userInfo, null, 2)
            })
          }), account.extra && /*#__PURE__*/_jsx(InfoRow, {
            nameWidth: 120,
            name: "Extra",
            children: /*#__PURE__*/_jsx("pre", {
              style: {
                margin: 0,
                fontSize: 12
              },
              children: JSON.stringify(account.extra, null, 2)
            })
          }), account.provider === LOGIN_PROVIDER.PASSKEY && /*#__PURE__*/_jsx(Button, {
            size: "small",
            variant: "contained",
            color: "error",
            sx: {
              mb: 1
            },
            onClick: async () => {
              await disconnectPasskey({
                session,
                connectedAccount: account
              });
              await onChangeUser(user);
            },
            children: t('common.disconnect')
          })]
        })]
      }, account.did);
    }), /*#__PURE__*/_jsx(RegisterPasskey, {
      hasPasskey: hasPasskey,
      refresh: session.refresh
    })]
  });
}
UserConnections.propTypes = {
  user: PropTypes.object.isRequired,
  onChangeUser: PropTypes.func
};