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.getDocumentViewById(docId)
            if (docView) {
                doc = docView.rootDoc;
            }
        } else if (data) {
            console.log(data, type)
            switch(type) {
                case "YouTube":
                    console.log('create ', type, 'document')
                    doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript })
                    break;
                case "Video":
                    console.log('create ', type, 'document')
                    doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript })
                    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>
}