import classNames from 'classnames';
import React from 'react';
import { FormattedMessage, FormattedNumber, defineMessages } from 'react-intl';


import { getSettings } from 'soapbox/actions/settings';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display-name';
import Permalink from 'soapbox/components/permalink';
import RelativeTimestamp from 'soapbox/components/relative_timestamp';
import { Text } from 'soapbox/components/ui';
import ActionButton from 'soapbox/features/ui/components/action-button';
import { useAppSelector } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';

const getAccount = makeGetAccount();

interface IAccountCard {
  id: string,
}

const messages = defineMessages({
  today: { id: 'account.today', defaultMessage: 'Today' },
  yesterday: { id: 'account.yesterday', defaultMessage: 'Yesterday' },
  days: { id: 'account.days', defaultMessage: 'Days' },
});


const AccountCard: React.FC<IAccountCard> = ({ id }) => {
  const me = useAppSelector((state) => state.me);
  const account = useAppSelector((state) => getAccount(state, id));
  const autoPlayGif = useAppSelector((state) => getSettings(state).get('autoPlayGif'));

  if (!account) return null;

  const followedBy = me !== account.id && account.relationship?.followed_by;

  const ago = React.useMemo(() => {
    const date = new Date(account.last_status_at).valueOf();
    const today = new Date().valueOf();

    const diffInDays = Math.floor((today - date) / 1000 / 60 / 60 / 24);

    return diffInDays;
  }, [account]);

  return (
    <div className='directory__card shadow dark:bg-slate-700 flex flex-col'>
      {followedBy &&
        <div className='directory__card__info'>
          <span className='bg-white rounded p-1 mt-1 text-[8px] opacity-90 uppercase dark:text-white dark:bg-slate-800'>
            <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
          </span>
        </div>}
      <div className='directory__card__img'>
        <img src={autoPlayGif ? account.header : account.header_static} alt='' className='parallax' />
      </div>

      <div className='px-4 py-3'>
        <Permalink href={account.url} to={`/@${account.acct}`}>
          <div className='flex justify-between items-end min-h-[30px]'>
            <Avatar className="absolute border-solid border-4 border-white dark:border-slate-700" account={account} size={100} />
            <div className="text-right grow">
              <ActionButton account={account} small />
            </div>
          </div>
          <Text className='mt-3 leading-5' size="lg">
            <DisplayName account={account} />
          </Text>
        </Permalink>
      </div>

      <div className='h-24 overflow-hidden px-4 py-3 grow'>
        <Text
          size="sm"
          className={classNames('italic account__header__content', (account.note.length === 0 || account.note === '<p></p>') && 'empty')}
          dangerouslySetInnerHTML={{ __html: account.note_emojified }}
        />
      </div>

      <div className='flex items-center justify-between px-4 py-3 mt-4'>
        <div>
          <Text theme='primary' size='xs'>
            <FormattedMessage id='account.posts' defaultMessage='Posts' />
          </Text> 
          <Text weight='bold' size="lg" className='leading-5'><FormattedNumber value={account.statuses_count} /></Text>
        </div>
        <div className='accounts-table__count text-right'>
          <Text theme='primary' size="xs"><FormattedMessage id='account.last_status' defaultMessage='Last active' /></Text>
          {account.last_status_at === null
            ? <Text weight='bold' size="lg" className='leading-5'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text>
            : <Text weight='bold' size="lg" className='leading-5'>
                {
                  (ago < 1) && <FormattedMessage { ...messages.today } />
                }
                {
                  (ago >= 1 && ago < 2) && <FormattedMessage { ...messages.days } />
                }
                {
                  ago >= 2 && <>{ ago } <FormattedMessage { ...messages.days } /></>
                }
              </Text>}
        </div>
      </div>
    </div>
  );
};

export default AccountCard;