import React, { useContext } from 'react';
import './fulfillment.scss';
import { KnowledgeIcon } from '../../../../components/aisera-icons/custom';
import { IAnnotationFulfillment } from '../../../../modules/request-details/models';
import NavigationLink from '../../../../core/components/navigation-link/NavigationLink';
import { RequestContext } from '../../../../pages/request-details/Request.context';

const Fulfilment = ({fulfillment}: IFulfillmentProps) => {
    const { actions } = useContext(RequestContext);
    
    const handleClick = () => {
        
        // actions.handler({type: 'ViewNavigation', data: {viewId: Views.IntentDetails, data : {entityId: intentId}}});
    }
    
    return (
        <div className='fulfillment-renderer'>
            <span className="icon">
                <KnowledgeIcon />
            </span>
            <div className="name-score">
                <span className='name'>
                    <NavigationLink text={fulfillment.name} handleClick={handleClick}/>
                </span>
                <span className="score">
                    {
                        fulfillment.source === 'Intent' ? `${Math.round(fulfillment.score * 100)}% Confidence`: `Click-through rate: ${Math.round(fulfillment.score)}%`
                    }
                </span>
            </div>
        </div>
    )
}

export default Fulfilment;

export interface IFulfillmentProps {
    fulfillment: IAnnotationFulfillment
}