import { useMemo } from 'react';
import { Button } from '@mui/material';
import { useMemoizedFn } from 'ahooks';
import { Icon } from '@iconify/react';
import { translate } from '@arcblock/ux/lib/Locale/util';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';

import { joinURL } from 'ufo';
import { User } from '../../../../@types';

import { translations } from '../../../libs/locales';

const getDiscussKitMountPoint = () => {
  const { componentMountPoints = [] } = window.blocklet || {};
  const component = componentMountPoints.find((c: any) => c.name === 'did-comments');
  return component?.mountPoint;
};

function Chat({ user }: { user: User }) {
  const { locale } = useLocaleContext();
  const t = useMemoizedFn((key, data = {}) => {
    return translate(translations, key, locale, 'en', data);
  });
  // 获取 discuss kit 的挂载点
  const discussKitMountPoint = useMemo(() => getDiscussKitMountPoint(), []);

  const onNavigateToChat = useMemoizedFn(() => {
    window.open(joinURL(discussKitMountPoint, `/chat/dm/${user?.did}`), '_blank');
  });

  if (!discussKitMountPoint) {
    return null;
  }

  return (
    <Button fullWidth variant="outlined" color="inherit" onClick={onNavigateToChat} sx={{ borderColor: 'divider' }}>
      <Icon icon="tabler:message-dots" style={{ marginRight: 4 }} />
      {t('profile.chat')}
    </Button>
  );
}

export default Chat;
