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 => {
                    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));
                    if (rec.embedding) {
                        const x = (rec.embedding.x / x_bound) * 50;
                        const y = (rec.embedding.y / y_bound) * 50;
                        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.LightboxDoc?.title)}
            </div>
        </div>
    );
};