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

export function ExploreView(props: IExploreView) {
    const { recs, bounds = emptyBounds } = props;

    return (
        <div className="exploreView-container">
            {recs &&
                recs.map(rec => {
                    const xBound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x));
                    const yBound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y));
                    if (rec.embedding) {
                        const x = (rec.embedding.x / xBound) * 50;
                        const y = (rec.embedding.y / yBound) * 50;
                        return (
                            <div key={'' + x + ' ' + y} className="exploreView-doc" onClick={() => {}} style={{ top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)` }}>
                                {rec.title}
                            </div>
                        );
                    }
                    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>
    );
}