import {
  IonIcon,
  IonItem,
  IonItemOption,
  IonItemOptions,
  IonItemSliding,
  IonNavLink,
  IonText,
  IonThumbnail,
} from '@ionic/react';
import { checkmarkDone } from 'ionicons/icons';
import ChatHelloworld from '../../pages/chat';
import { ContactStore } from '../../store';
import { getContacts } from '../../store/Selectors';

import HKPartyIonDeleteIcon from '../HKPartyIonDeleteIcon';
import './style.scss';

const ChatItem = ({ chat }) => {
  const contacts = ContactStore.useState(getContacts);
  const { chats, contact_id } = chat;
  const { read, date, preview, received } = chats[chats.length - 1];
  const contact = contacts.filter(c => c.id === contact_id)[0];
  const notificationCount = chats.filter(chat => chat.read === false).length;

  return (
    <>
      <IonItemSliding>
        {/* 
          <IonItemOptions side="start">
            <IonItemOption color="success">Archive</IonItemOption>
          </IonItemOptions>
        */}

        {/*  */}
        <IonNavLink routerDirection="forward" component={() => <ChatHelloworld />}>
          <IonItem
            className="chat-row"
            // routerLink={`/tabs/messages/${contact.id}`}

            lines="full"
            detail={false}
          >
            <IonThumbnail slot="start" style={{ '--border-radius': '50%' }}>
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </IonThumbnail>
            <div className="chat-row-content">
              <IonText>{contact.name}</IonText>
              <IonText>{read && received && <IonIcon icon={checkmarkDone} color="primary" />}</IonText>
              <IonText>{preview}</IonText>
            </div>
            <div slot="end">
              <div>
                <IonText>{date}</IonText>
                <IonText>
                  {notificationCount > 0 && <IonText className="chat-notification">{notificationCount}</IonText>}
                </IonText>
              </div>
            </div>
          </IonItem>
        </IonNavLink>
        {/*  */}
        <IonItemOptions side="end">
          <IonItemOption color="danger">
            <HKPartyIonDeleteIcon size={'large'} />
          </IonItemOption>
        </IonItemOptions>
      </IonItemSliding>
    </>
  );
};

export default ChatItem;