import React from 'react';
import { FormattedList, FormattedMessage } from 'react-intl';

import { useCompose } from '@/hooks/use-compose';
import { useFeatures } from '@/hooks/use-features';
import { useModalsActions } from '@/stores/modals';
import { useSettings } from '@/stores/settings';

interface IReplyMentions {
  composeId: string;
}

const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
  const { openModal } = useModalsActions();
  const features = useFeatures();
  const compose = useCompose(composeId);
  const to = compose.to;

  const { forceImplicitAddressing } = useSettings();
  const explicitAddressing = features.createStatusExplicitAddressing && !forceImplicitAddressing;

  if (!explicitAddressing || !compose.inReplyToId || !to) {
    return null;
  }

  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();

    openModal('REPLY_MENTIONS', {
      composeId,
    });
  };

  if (!compose.parentRebloggedById && to.length === 0) {
    return null;
  }

  if (to.length === 0) {
    return (
      <a href='#' className='mb-1 text-sm text-gray-700 dark:text-gray-600' onClick={handleClick}>
        <FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
      </a>
    );
  }

  const accounts = to.slice(0, 2).map((acct: string) => {
    const username = acct.split('@')[0];
    return (
      <span
        key={acct}
        className='inline-block text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-400'
      >
        @{username}
      </span>
    );
  });

  if (to.length > 2) {
    accounts.push(
      <FormattedMessage
        id='reply_mentions.more'
        defaultMessage='{count} more'
        values={{ count: to.length - 2 }}
      />,
    );
  }

  return (
    <a href='#' className='mb-1 text-sm text-gray-700 dark:text-gray-600' onClick={handleClick}>
      <FormattedMessage
        id='reply_mentions.reply'
        defaultMessage='Replying to {accounts}'
        values={{
          accounts: <FormattedList type='conjunction' value={accounts} />,
        }}
      />
    </a>
  );
};

export { ReplyMentions as default };
