import { Box } from '@mui/material';
import type { BoxProps } from '@mui/material';
import { Icon } from '@iconify/react';
import { useMemoizedFn, useCreation } from 'ahooks';
import DID from '@arcblock/ux/lib/DID';
import ScheduleOutlineRoundedIcon from '@iconify-icons/material-symbols/schedule-outline-rounded';
import MoreTimeRoundedIcon from '@iconify-icons/material-symbols/more-time-rounded';
import CaptivePortalRoundedIcon from '@iconify-icons/material-symbols/captive-portal-rounded';
import SettingsInputAntennaRoundedIcon from '@iconify-icons/material-symbols/settings-input-antenna-rounded';
import RelativeTime from '@arcblock/ux/lib/RelativeTime';
import { translate } from '@arcblock/ux/lib/Locale/util';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
import ShortenLabel from '@arcblock/ux/lib/UserCard/Content/shorten-label';
import { translations } from '../../libs/locales';
import UserInfoItem from './user-info-item';
import type { User } from '../../../@types';

export default function UserInfo({
  user,
  isMySelf = false,
  ...rest
}: {
  user: User;
  isMySelf?: boolean;
} & BoxProps) {
  const { locale } = useLocaleContext();
  const t = useMemoizedFn((key, data = {}) => {
    return translate(translations, key, locale, 'en', data);
  });

  const readableProvider = useCreation(() => {
    return (user?.sourceProvider && LOGIN_PROVIDER_NAME[user.sourceProvider]) || t('unknown');
  }, [user?.sourceProvider]);

  const userInfoListData = [];
  if (isMySelf) {
    userInfoListData.push({
      icon: <Icon fontSize={16} icon={ScheduleOutlineRoundedIcon} />,
      title: t('lastLoginAt'),
      content: user?.lastLoginAt ? (
        // @ts-ignore
        <RelativeTime locale={locale} value={user?.lastLoginAt} relativeRange={3 * 86400 * 1000} />
      ) : (
        t('unknown')
      ),
    });
    userInfoListData.push({
      icon: <Icon fontSize={16} icon={SettingsInputAntennaRoundedIcon} />,
      title: t('lastLoginIp'),
      content: user?.lastLoginIp ? <ShortenLabel maxLength={20}>{user?.lastLoginIp}</ShortenLabel> : t('unknown'),
    });
  }
  userInfoListData.push({
    icon: <Icon fontSize={16} icon={MoreTimeRoundedIcon} />,
    title: t('createdAt'),
    // @ts-ignore
    content: user?.createdAt ? <RelativeTime locale={locale} value={user?.createdAt} /> : t('unknown'),
  });
  if (isMySelf) {
    userInfoListData.push({
      icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
      title: t('registerFrom'),
      content: readableProvider,
    });
    if (user?.inviter) {
      userInfoListData.push({
        icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
        title: t('invitedBy'),
        content: (
          <DID style={{ maxWidth: 260 }} did={user.inviter} showQrcode copyable compact responsive locale={locale} />
        ),
      });
    }
  }

  return (
    <Box
      {...rest}
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: 1.5,
        ...rest?.sx,
      }}>
      {userInfoListData.map((item) => (
        <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} />
      ))}
    </Box>
  );
}
