import garbage_blue from "../../../assets/images/garbage-blue.png";
import garbage_white from "../../../assets/images/garbage-white.svg";

interface IObjectKeys {
	[key: string]: string;
}

const dictionary: IObjectKeys = {
	'support': 'category-color-support',
	'service is down': 'category-color-service-is-down',
    'service': 'category-color-service',
    'announcements': 'category-color-anakoinosi',
    'ΥΠΗΡΕΣΙΑ': 'category-color-ipiresia'
};

type MessageBoxProps = {
    itemID: number
    itemTag: string,
    itemDate: string,
    itemTitle: string,
    itemBody: string | undefined,
    itemRead: number,
    readNotification: (index: number) => void,
    index: number,
    hasDeleted: boolean,
    setHasDeleted: (e: any) => void,
    onDelete: () => void,
    onCancelDelete: () => void
};

const MessageBox = (
    {itemID, itemTag, itemDate, itemTitle, itemBody, itemRead, readNotification, 
        index, hasDeleted, setHasDeleted, onDelete, onCancelDelete }: MessageBoxProps ) => {
    const tagColor = dictionary[itemTag];
    if (hasDeleted) {
        return (
            // messages container - messages list - delete question - cancel
            <div className="messages-wrapper--del d-flex justify-content-center" key={index}>
                {/* messages container - message item */}
                <div className="messages-wrapper--del--to-be d-flex align-items-center" >
                    <div className="messages-wrapper--del--to-be--row">
                        <div className="messages-wrapper--del--to-be--row--deleted d-flex">
                            {/* messages container - delete question */}
                            <div className="garbage-bin-deleted d-flex align-items-center">
                                <img width='20' height='22' src={garbage_white} alt='garbage white icon'/>
                            </div>
                            <div className="messages-wrapper--del--to-be--row--deleted--text d-flex align-items-center">
                                <span className="delete-msg">Να το αφαιρέσω;</span>
                            </div>
                            <div className="messages-wrapper--del--to-be--row--deleted--actions d-flex">
                                {/* messages container - delete */}
                                <button onClick={() => {
                                    onDelete()
                                }}>
                                    Ναι
                                </button>
                                {/* messages container - messages list - cancel */}
                                <button onClick={() => {
                                    onCancelDelete()
                                }}>
                                    Όχι
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    } else {
        return (
            <>
            {/* messages container - messages list */}
                <div className='messages-wrapper--fsection col-md-4 col-lg-3 col-xxl-2'>
                    <div className="row min-height">
                        <div 
                            className='messages-wrapper--fsection--bin col-3' 
                            onClick={() => setHasDeleted(itemID)}>
                            <span>
                                <img src={garbage_blue} alt='bin icon' />
                            </span>
                        </div>
                        <div className='messages-wrapper--fsection--cat col-9'>
                            <span className={tagColor}>
                                {itemTag}
                            </span></div> 
                    </div>                                                               
                </div>
                {/* messages container - read / unread */}
                <div className='messages-wrapper--secsection col-md-8 col-lg-9 col-xxl-10'
                    onClick={() => readNotification(itemID)}>
                    <div className="row min-height">
                        <div className='messages-wrapper--secsection--date col-12'>
                            <span>{itemDate}</span>
                            </div>
                        <div className={'messages-wrapper--secsection--title col-11'}>
                            <span className='title-black'>{itemTitle}</span>&nbsp;
                            <span>{itemBody}</span>
                            </div>                        
                        <div className='messages-wrapper--secsection--state col-1' id={itemRead ? 'read' : 'notRead'}>
                            <span className="state-circle"></span>
                        </div>
                    </div>                    
                </div>
            </>
        )
    }
};

export default MessageBox;