import * as React from 'react';
import { IRecommendation } from './utils';
import './Recommendation.scss';
import { getType } from '../../utils';
import { FaEyeSlash } from 'react-icons/fa';
import { NewLightboxView } from '../../NewLightboxView';
import { DocumentManager } from '../../../../util/DocumentManager';
import { Doc } from '../../../../../fields/Doc';
import { Docs } from '../../../../documents/Documents';

export const Recommendation = (props: IRecommendation) => {
    const { title, data, type, text, transcript, loading, source, previewUrl, related_concepts, distance, docId } = props;

    return (
        <div
            className={`recommendation-container ${loading && 'loading'} ${previewUrl && 'previewUrl'}`}
            onClick={() => {
                let doc: Doc | null = null;
                if (source == 'Dash' && docId) {
                    const docView = DocumentManager.Instance.getDocumentViewsById(docId).lastElement();
                    if (docView) {
                        doc = docView.Document;
                    }
                } else if (data) {
                    switch (type) {
                        case 'YouTube':
                            console.log('create ', type, 'document');
                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315 });
                            doc.transcript = transcript ? JSON.stringify(transcript) : undefined;
                            break;
                        case 'Video':
                            console.log('create ', type, 'document');
                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315 });
                            doc.transcript = transcript ? JSON.stringify(transcript) : undefined;
                            break;
                        case 'Webpage':
                            console.log('create ', type, 'document');
                            doc = Docs.Create.WebDocument(data, { title: title, text: text });
                            break;
                        case 'HTML':
                            console.log('create ', type, 'document');
                            doc = Docs.Create.WebDocument(data, { title: title, text: text });
                            break;
                        case 'Text':
                            console.log('create ', type, 'document');
                            doc = Docs.Create.TextDocument(data, { title: title, text: text });
                            break;
                        case 'PDF':
                            console.log('create ', type, 'document');
                            doc = Docs.Create.PdfDocument(data, { title: title, text: text });
                            break;
                    }
                }
                if (doc !== null) NewLightboxView.SetNewLightboxDoc(doc);
            }}>
            {loading ? <div className={`image-container`}></div> : previewUrl ? <div className={`image-container`}>{<img className={`image`} src={previewUrl}></img>}</div> : null}
            <div className={`title`}>{title}</div>
            <div className={`info`}>
                {!loading && (
                    <div className={`type-container`}>
                        <div className={`lb-label`}>Type</div>
                        <div className={`lb-type`}>{getType(type!)}</div>
                    </div>
                )}
                {!loading && (
                    <div className={`distance-container`}>
                        <div className={`lb-label`}>Distance</div>
                        <div className={`lb-distance`}>{distance}</div>
                    </div>
                )}
            </div>
            <div className={`source`}>
                {!loading && (
                    <div className={`source-container`}>
                        <div className={`lb-label`}>Source</div>
                        <div className={`lb-source`}>{source}</div>
                    </div>
                )}
            </div>
            <div className={`explainer`}>
                {!loading && (
                    <div>
                        You are seeing this recommendation because this document also explores
                        <div className={`concepts-container`}>
                            {related_concepts?.map(val => {
                                return <div className={'concept'}>{val}</div>;
                            })}
                        </div>
                    </div>
                )}
            </div>
            <div className={`hide-rec`}>
                {!loading && (
                    <>
                        <div>Hide Recommendation</div>
                        <div style={{ fontSize: 15, paddingRight: 5 }}>
                            <FaEyeSlash />
                        </div>
                    </>
                )}
            </div>
        </div>
    );
};