import './ExploreView.scss';
import { IBounds, IExploreView, emptyBounds } from "./utils";
import { IRecommendation } from "../components";
import * as React from 'react';
import { NewLightboxView } from '../NewLightboxView';
import { StrCast } from '../../../../fields/Types';



export const ExploreView = (props: IExploreView) => {
    const { recs, bounds=emptyBounds } = props
    
    return <div className={`exploreView-container`}>
        {recs && recs.map((rec) => {
            console.log(rec.embedding, bounds)
            const x_bound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x))
            const y_bound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y))
            console.log(x_bound, y_bound)
            if (rec.embedding) {
                const x = (rec.embedding.x / x_bound) * 50;
                const y = (rec.embedding.y / y_bound) * 50;
                console.log(x, y)
                return <div className={`exploreView-doc`} onClick={() => {}} style={{top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)`}}>
                    {rec.title}
                </div>
            } else return (null)
        })}
        <div className={`exploreView-doc`} style={{top: `calc(50% + ${0}%)`, left: `calc(50% + ${0}%)`, background: '#073763', color: 'white'}}>{StrCast(NewLightboxView.NewLightboxDoc?.title)}</div>
    </div>
}