import { observer } from 'mobx-react';
import * as React from 'react';
import './LinkEditor.scss';

interface link_relationshipSearchProps {
    results: string[] | undefined;
    display: string;
    //callback fn to set rel + hide dropdown upon setting
    handleRelationshipSearchChange: (result: string) => void;
    toggleSearch: () => void;
}
@observer
export class link_relationshipSearch extends React.Component<link_relationshipSearchProps> {
    handleResultClick = (e: React.MouseEvent) => {
        const relationship = (e.target as HTMLParagraphElement).textContent;
        if (relationship) {
            this.props.handleRelationshipSearchChange(relationship);
        }
    };

    handleMouseEnter = () => {
        this.props.toggleSearch();
    };

    handleMouseLeave = () => {
        this.props.toggleSearch();
    };

    /**
     * Render an empty div to increase the height of LinkEditor to accommodate 2+ results
     */
    emptyDiv = () => {
        if (this.props.results && this.props.results.length > 2 && this.props.display === 'block') {
            return <div style={{ height: '50px' }} />;
        }
    };

    render() {
        return (
            <div className="linkEditor-relationship-dropdown-container">
                <div className="linkEditor-relationship-dropdown" style={{ display: this.props.display }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
                    {
                        // return a dropdown of relationship results if there exist results
                        this.props.results ? (
                            this.props.results.map(result => {
                                return (
                                    <p key={result} onClick={this.handleResultClick}>
                                        {result}
                                    </p>
                                );
                            })
                        ) : (
                            <p>No matching relationships</p>
                        )
                    }
                </div>

                {/*Render an empty div to increase the height of LinkEditor to accommodate 2+ results */}
                {this.emptyDiv()}
            </div>
        );
    }
}