import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';

import Avatar from 'soapbox/components/avatar';
import StillImage from 'soapbox/components/still_image';
import { HStack, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import { useAppSelector } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';
import { getAcct } from 'soapbox/utils/accounts';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import { displayFqn } from 'soapbox/utils/state';

const getAccount = makeGetAccount();

interface IUserPanel {
  accountId: string,
  action?: JSX.Element,
  badges?: JSX.Element[],
  domain?: string,
}

const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain }) => {
  const intl = useIntl();
  const account = useAppSelector((state) => getAccount(state, accountId));
  const fqn = useAppSelector((state) => displayFqn(state));

  if (!account) return null;
  const displayNameHtml = { __html: account.get('display_name_html') };
  const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
  const header = account.get('header');
  const verified = account.get('verified');

  return (
    <div className='relative'>
      <Stack space={2}>
        <Stack>
          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative'>
            {header && (
              <StillImage
                src={account.get('header')}
                className='absolute inset-0 object-cover'
                alt=''
              />
            )}
          </div>

          <HStack justifyContent='between'>
            <Link
              to={`/@${account.get('acct')}`}
              title={acct}
              className='-mt-12 block'
            >
              <Avatar
                account={account}
                className='h-20 w-20 bg-gray-50 ring-2 ring-white'
              />
            </Link>

            {action && (
              <div className='mt-2'>{action}</div>
            )}
          </HStack>
        </Stack>

        <Stack>
          <Link to={`/@${account.get('acct')}`}>
            <HStack space={1} alignItems='center'>
              <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />

              {verified && <VerificationBadge />}

              {badges && badges.length > 0 && (
                <HStack space={1} alignItems='center'>
                  {badges}
                </HStack>
              )}
            </HStack>
          </Link>

          <Text size='sm' theme='muted'>
            @{getAcct(account, fqn)}
          </Text>
        </Stack>

        <HStack alignItems='center' space={3}>
          {account.get('followers_count') >= 0 && (
            <Link to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
              <HStack alignItems='center' space={1}>
                <Text theme='primary' weight='bold' size='sm'>
                  {shortNumberFormat(account.get('followers_count'))}
                </Text>
                <Text weight='bold' size='sm'>
                  <FormattedMessage id='account.followers' defaultMessage='Followers' />
                </Text>
              </HStack>
            </Link>
          )}

          {account.get('following_count') >= 0 && (
            <Link to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
              <HStack alignItems='center' space={1}>
                <Text theme='primary' weight='bold' size='sm'>
                  {shortNumberFormat(account.get('following_count'))}
                </Text>
                <Text weight='bold' size='sm'>
                  <FormattedMessage id='account.follows' defaultMessage='Follows' />
                </Text>
              </HStack>
            </Link>
          )}
        </HStack>
      </Stack>
    </div>
  );
};

export default UserPanel;