import { useMemo } from 'react';
import { Box, Typography } from '@mui/material';
import PropTypes from 'prop-types';
import UserCard from '@arcblock/ux/lib/UserCard';
import { joinURL, withQuery } from 'ufo';
import { useMemoizedFn } from 'ahooks';

import { BLOCKLET_SERVICE_PATH_PREFIX } from '../constant';

export default function BindConflictAlert({ data }) {
  const { message, data: userInfo } = data;

  const locale = useMemo(() => {
    return new URLSearchParams(window.location.search).get('locale') || 'en';
  }, []);

  const visitUser = useMemoizedFn(() => {
    window.open(
      withQuery(joinURL(BLOCKLET_SERVICE_PATH_PREFIX, 'user'), {
        locale,
        did: userInfo.did,
      }),
      '_blank'
    );
  });

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Typography sx={{ fontSize: 14, color: 'text.secondary' }}>{message}</Typography>
      <UserCard showDid did={userInfo.did} onAvatarClick={visitUser} />
    </Box>
  );
}

BindConflictAlert.propTypes = {
  data: PropTypes.object.isRequired,
};
