import React from 'react';

import { Avatar, AvatarSize } from './Avatar';
import { ContactName } from './conversation/ContactName';

import { FindAndFormatContactType, PropsForSearchResults } from '../state/ducks/conversations';

type PropsHousekeeping = {
  isSelected?: boolean;
};

type Props = PropsForSearchResults & PropsHousekeeping;

const FromName = (props: { from: FindAndFormatContactType; to: FindAndFormatContactType }) => {
  const { from, to } = props;

  if (from.isMe && to.isMe) {
    return (
      <span className="module-message-search-result__header__name">
        {window.i18n('noteToSelf')}
      </span>
    );
  }
  if (from.isMe) {
    return <span className="module-message-search-result__header__name">{window.i18n('you')}</span>;
  }

  return (
    // tslint:disable: use-simple-attributes
    <ContactName
      phoneNumber={from.phoneNumber}
      name={from.name || ''}
      profileName={from.profileName || ''}
      module="module-message-search-result__header__name"
      shouldShowPubkey={false}
    />
  );
};

const From = (props: { from: FindAndFormatContactType; to: FindAndFormatContactType }) => {
  const { to, from } = props;
  const fromName = <FromName from={from} to={to} />;

  if (!to.isMe) {
    return (
      <div className="module-message-search-result__header__from">
        {fromName} {window.i18n('to')}{' '}
        <span className="module-mesages-search-result__header__group">
          <ContactName
            phoneNumber={to.phoneNumber}
            name={to.name || ''}
            profileName={to.profileName || ''}
            shouldShowPubkey={false}
          />
        </span>
      </div>
    );
  }

  return <div className="module-message-search-result__header__from">{fromName}</div>;
};

const AvatarItem = (props: { from: FindAndFormatContactType }) => {
  const { from } = props;
  const userName = from.profileName || from.phoneNumber;

  return (
    <Avatar
      avatarPath={from.avatarPath || ''}
      name={userName}
      size={AvatarSize.S}
      pubkey={from.phoneNumber}
    />
  );
};
// export const MessageSearchResult = (props: Props) => {
//   const { from, id: messageId, isSelected, conversationId, receivedAt, snippet, to } = props;

//   const dispatch = useDispatch();

//   if (!from || !to) {
//     return null;
//   }

//   return (
//     <div
//       role="button"
//       onClick={() => {
//         dispatch(
//           openConversationExternal({
//             id: conversationId,
//             messageId,
//             firstUnreadIdOnOpen: undefined,
//           })
//         );
//       }}
//       className={classNames(
//         'module-message-search-result',
//         isSelected ? 'module-message-search-result--is-selected' : null
//       )}
//     >
//       <AvatarItem from={from} />
//       <div className="module-message-search-result__text">
//         <div className="module-message-search-result__header">
//           <From from={from} to={to} />
//           <div className="module-message-search-result__header__timestamp">
//             <Timestamp timestamp={receivedAt} />
//           </div>
//         </div>
//         <div className="module-message-search-result__body">
//           <MessageBodyHighlight text={snippet || ''} />
//         </div>
//       </div>
//     </div>
//   );
// };