import { useEffect, useState } from 'react';
import './chat-metadata.scss';

import ChatMetadataItem, { IChatMetadataItemProps } from './ChatMetadataItem';
import { LanguageCode } from '../../../../core/models/core.model';
import { IRequestData } from '../../../../modules/request-details/models';
import FormatDate from '../../../../core/components/date/FormatDate';
import SentimentData from '../sentiment-data/SentimentData';
import ConversationData from '../conversation-duration/ConversationDuration';
import Channel from '../channel/Channel';
import User from '../user/User';
import AiseraLoader from '../../../../components/AiseraLoader/AiseraLoader';
import ViewSessionRequestsLink from '../view-session-request-link/ViewSessionRequestsLink';

const ChatMetadata = (props: IChatMetadataProps) => {
    const { request: requestData } = props;
    const [metadata, setMetadata] = useState<IChatMetadataItemProps[]>([]);
    useEffect(() => {

        const fetchRequestMetadata = () => {
            if (!requestData) {
                return;
            }
            
            const feedbackPercentage = (score : number) => {
                return Math.floor( (score / 5 ) * 100);
            }

            const getIntentCategoriesToRender = (intentsCategories: string[] | 'None') => {
                const title = 'Intent Category';
                if(intentsCategories === 'None') {
                    return { title, value: intentsCategories};
                }
                return { title, cssClass: 'intent-categories', component: makeList(Array.from(new Set(intentsCategories))) }
            }

            const getRequestFulfillmentsToRender = (requestFulfillments: string[]) => {
                const title = 'Fulfillment Source';
                if (!requestFulfillments?.length) {
                    return { title, value: 'None'};
                }
                return { title, component: makeList(Array.from(new Set(requestFulfillments))) }
            }

            const makeList = (list: string[]) => (
                list?.map(item => (<p key={item}>{item}</p>))
            )


            const requestMetadata = [
                { title: 'Request ID', value: requestData.id },
                // getIntentCategoriesToRender(requestData._intentsCategories),
                { title: 'Date', value: <FormatDate date={requestData.created_at} /> },
                // getRequestFulfillmentsToRender(requestData.requestFulfillments.map(({producer}) => producer)),
                { title: 'Status', value: requestData.status },
                { title: 'User', component: <User {...requestData.user} userId={requestData.reporter_id} />}, // User Renderer
                { title: 'City', value: requestData.clientDevice.location_city ?? 'None' },
                { title: 'Country', value: requestData.clientDevice.location_country ?? 'None' },
                { title: 'Feedback Answer', value: requestData.conversation.feedback_answer === 'None' && 'No Answer' || requestData.conversation.feedback_answer },
                { title: 'Escalated', value: requestData._isEscalated ? 'Yes' : 'No'},
                { title: 'Escalation Type', value: requestData.escalation_type ?? '-'},
                { title: 'Ticket ID', value: requestData.sor_ticket_id ?? '-'},
                // { title: 'Language', value: LanguageCode[(requestData.session?.language_detected?.code) as keyof typeof LanguageCode] },
                { title: 'Channel', cssClass: 'channel', component: <Channel {...requestData.channel} channelId={requestData.channel_id} /> }, // Channel Renderer
                { title: 'Session', component: <ViewSessionRequestsLink count={requestData.totalRequestsInSession} sessionId={requestData.session_id}/>},
                { title: 'Conversation Duration',  component: <ConversationData value={requestData.conversation.duration / 1000 } /> },
                { title: 'Sentiment', component: <SentimentData value={requestData.sentimentPrediction.first_prediction} /> },
                { title: 'Session Feedback Score', value: requestData.sessionFeedback.score ? feedbackPercentage(requestData.sessionFeedback.score) + '%' : null },
                { title: 'Last Updated', component: <FormatDate date={requestData.updated_at} /> }
                
            ];
            if(requestData.agent_handoff_at) {
                requestMetadata.push({ title: 'Agent Handoff At', value: <FormatDate date={requestData.agent_handoff_at} /> });
            }
            setMetadata(requestMetadata.filter(({component, value}) => component || value) as IChatMetadataItemProps[]);
        };
        fetchRequestMetadata();
    }, [requestData])

    return (
        <div className="request-metadata-container">
            {metadata?.length && (
                metadata.map((field, i) => (
                    <ChatMetadataItem key={i} {...field} />
                ))
            ) || (
                    <AiseraLoader />
                )}
        </div>

    )
}

export default ChatMetadata;

export interface IChatMetadataProps {
    request: IRequestData;
}