import 'core-js/modules/es.object.assign.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { styled, Box, Divider, useTheme } from '@mui/material';
import { Button } from '../../atom/Button/Button.js';
import { IconFactory } from '../../atom/IconFactory/IconFactory.js';
import { IconFont } from '../../atom/IconFont/IconFont.js';
import { Typography } from '../../atom/Typography/Typography.js';
import { CopyButton } from '../CopyButton/CopyButton.js';
import { LinkIconText } from '../LinkIconText/LinkIconText.js';
import { Modal } from '../Modal/Modal.js';

let _ = t => t,
  _t,
  _t2,
  _t3,
  _t4,
  _t5,
  _t6,
  _t7,
  _t8,
  _t9,
  _t10,
  _t11;
const WalletProfileModal = ({
  futurePassAddress,
  wallets,
  ethExplorerUrl,
  rootExplorerUrl,
  handleClose,
  handleLogout,
  className
}) => {
  var _a;
  const theme = useTheme();
  const mainEoa = (_a = wallets[0]) === null || _a === void 0 ? void 0 : _a.address;
  return jsxs(StyledModal, Object.assign({
    className: className !== null && className !== void 0 ? className : '',
    header: jsx(StyledIconFactory, {
      name: theme.palette.mode === 'dark' ? 'FPassDark' : 'FPassLight'
    }),
    handleClose: handleClose
  }, {
    children: [jsx(StyledTitle, Object.assign({
      variant: "overline",
      color: "text.secondary"
    }, {
      children: "your futurepass address"
    })), jsx(StyledBox, Object.assign({
      sx: {
        borderColor: 'secondary.main',
        backgroundColor: 'secondary.light'
      }
    }, {
      children: jsx(CopyButton, Object.assign({
        value: futurePassAddress,
        onlyIconChange: true
      }, {
        children: jsxs(StyledFPAddress, Object.assign({
          variant: "caption"
        }, {
          children: [futurePassAddress.slice(0, 6), "...", futurePassAddress.slice(-4)]
        }))
      }))
    })), jsx(StyledTitle2, Object.assign({
      variant: "overline",
      color: "text.secondary"
    }, {
      children: "Wallets"
    })), wallets.map(({
      address,
      connected
    }, index) => {
      return jsxs(StyledCopyDiv, {
        children: [jsx(CopyButton, Object.assign({
          value: address,
          onlyIconChange: true
        }, {
          children: jsxs(StyledFPAddress, Object.assign({
            variant: "caption"
          }, {
            children: [address.slice(0, 6), "...", address.slice(-4)]
          }))
        })), connected ? jsxs(StyledConnectionDiv, {
          children: [jsx(IconFont, {
            name: "check_circle",
            fontSize: 16
          }), jsx(StyledFPAddress, Object.assign({
            variant: "caption"
          }, {
            children: "Connected"
          }))]
        }) : jsx(StyledFPAddress, Object.assign({
          variant: "caption",
          color: "text.secondary"
        }, {
          children: "Not connected"
        }))]
      }, index);
    }), jsx(StyledTitle2, Object.assign({
      variant: "overline",
      color: "text.secondary"
    }, {
      children: "activity"
    })), mainEoa != null && jsx(StyledLinkIconText, {
      text: "View on Ethereum",
      variant: 'caption',
      onClick: () => {
        // TODO: explorer url need to point to either the mainnet or testnet according to environment
        window.open(`${ethExplorerUrl}/address/${mainEoa}`, 'new');
      }
    }), jsx(StyledLinkIconText, {
      text: "View on Root Block Explorer",
      variant: 'caption',
      onClick: () => {
        window.open(
        // TODO: explorer url need to point to either the mainnet or testnet according to environment
        `${rootExplorerUrl}/account/${futurePassAddress}`, 'new');
      }
    }), jsx(StyledDivider, {
      sx: {
        borderColor: 'secondary.main'
      }
    }), jsx(StyledButton, Object.assign({
      variant: "outlined",
      startIcon: jsx(IconFont, {
        name: "logout"
      }),
      onClick: handleLogout
    }, {
      children: "Logout"
    }))]
  }));
};
// Styled Components
const StyledModal = styled(Modal)(_t || (_t = _`
  width: 100%;
  width: 368px;
  transition: all 0.1s;
`));
const StyledIconFactory = styled(IconFactory)(_t2 || (_t2 = _`
  width: 85px;
`));
const StyledTitle = styled(Typography)(_t3 || (_t3 = _`
  display: block;
  margin-bottom: 8px;
`));
const StyledTitle2 = styled(Typography)(_t4 || (_t4 = _`
  display: block;
  margin-top: 32px;
  margin-bottom: 8px;
`));
const StyledBox = styled(Box)(_t5 || (_t5 = _`
  padding: 8px;
  border-width: 1px;
  border-style: solid;
`));
const StyledFPAddress = styled(Typography)(_t6 || (_t6 = _`
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
`));
const StyledCopyDiv = styled(Box)(_t7 || (_t7 = _`
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
`));
const StyledConnectionDiv = styled(Box)(_t8 || (_t8 = _`
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
`));
const StyledLinkIconText = styled(LinkIconText)(_t9 || (_t9 = _`
  margin-bottom: 8px;
`));
const StyledDivider = styled(Divider)(_t10 || (_t10 = _`
  margin-top: 32px;
  margin-bottom: 32px;
`));
const StyledButton = styled(Button)(_t11 || (_t11 = _`
  width: 100%;
`));

export { WalletProfileModal, WalletProfileModal as default };
