import { Box, Chip, Typography, useMediaQuery, useTheme } from '@mui/material';
import type { Theme } from '@mui/material';
import noop from 'lodash/noop';

import RelativeTime from '../../RelativeTime';
import WalletOSIcon from '../../WalletOSIcon';
import { DID } from '../../DID';
import Avatar from '../../Avatar';
import { getSourceProvider } from '../libs/utils';

export default function QuickLoginItem({
  userSession,
  locale = 'en',
  onClick = noop,
}: {
  onClick?: () => void;
  locale?: string;
  userSession: {
    user: {
      avatar: string;
      did: string;
      fullName: string;
      role: string;
      roleTitle: string;
      email: string;
    };
    extra: {
      walletOS: string;
      provider: string;
    };
    updatedAt: string;
  };
}) {
  const { palette } = useTheme();
  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
  const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';

  return (
    <Box
      sx={{
        p: 2,
        transition: 'background-color 0.5s',
        bgcolor: 'background.paper',
        '&:hover, &:active': {
          backgroundColor: 'action.hover',
        },
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        cursor: 'pointer',
        '&:hover': {
          backgroundColor: 'action.hover',
        },
        width: '100%',
      }}
      onClick={onClick}>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 1.5,
          flex: 1,
          overflow: 'hidden',
        }}>
        <Avatar src={userSession.user.avatar} did={userSession.user.did} size={44} variant="circle" shape="circle" />
        <Box sx={{ flex: 1, overflow: 'hidden' }}>
          <Typography
            component={Box}
            sx={{
              fontSize: '16px',
              fontWeight: 500,
              display: 'flex',
              alignItems: 'center',
              gap: 1,
              color: 'text.primary',
            }}>
            {userSession.user.fullName}
            <Chip
              label={userSession.user?.roleTitle || userSession.user?.role}
              size="small"
              variant="outlined"
              sx={() => ({
                height: 'auto',
                fontWeight: 'bold',
                fontSize: '12px',
                borderColor: 'grey.300',
                color: 'text.secondary',
              })}
            />
          </Typography>
          {isRawWalletAccount ? (
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 0.5,
              }}>
              <WalletOSIcon
                provider={userSession?.extra?.provider}
                walletOS={userSession?.extra?.walletOS}
                color={palette.text.secondary}
              />
              <DID
                // @ts-ignore
                locale={locale}
                did={userSession.user.did}
                size={12}
                sx={{
                  lineHeight: 1,
                  fontSize: '12px',
                  mt: 0.5,
                  '& span.arc-avatar-did-motif': {
                    display: 'none !important',
                  },
                }}
                compact
              />
            </Box>
          ) : (
            <Typography sx={{ fontSize: '12px', color: 'text.secondary' }}>{userSession.user.email}</Typography>
          )}
        </Box>
      </Box>
      {userSession.updatedAt && !isMobile && (
        <Box component="span" sx={{ color: 'text.hint', fontSize: '12px', flexShrink: 0 }}>
          {/* @ts-ignore */}
          <RelativeTime value={userSession.updatedAt} locale={locale} />
        </Box>
      )}
    </Box>
  );
}
