<commit_before>let React = require('react');

let ToolButton = require('./ToolButton');

let Map = require('./Map');

let components = {};

let tool_info = fetch('data/tools.txt').then(response => {
    return new Promise(resolve => {
        response.text().then(str => {
            let tools = str.split('\n')
                                .filter(Boolean) // filter out blank lines
                .map(tool => tool.split('|'));

            tools.forEach(tool => components[tool[2]] = require(`./tools/${tool[2]}`));

            resolve(tools);
        });
    });
});

class Menu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            focused: false,
            tools: [],
            visible_tools: [],
            active_component: null
        };
        
        this.search = this.search.bind(this);
        this.select_tool = this.select_tool.bind(this);
        this.set_visible_tools = this.set_visible_tools.bind(this);
        this.on_select = this.on_select.bind(this);
        this.on_remove = this.on_remove.bind(this);
        this.on_search_focus = this.on_search_focus.bind(this);
        this.listen = this.listen.bind(this);
        
        Map.subscribe(this);
    }

    componentDidMount() {
        tool_info.then(tools => {
            this.setState({ tools });
            this.set_visible_tools();

            //load a tool if passed one in a search parameter
            var starting_tool = this.props.params.get("tool");
            console.log("starting_tool:", starting_tool);

            if (starting_tool) {
                this.on_select(starting_tool);
            }

        });
    }

    search(event) {
        let value = event.target.value;
        console.log(value);
    } 

    select_tool(tool) {
        console.log('selecting tool...');
    }

    on_select(component_name) {
        console.log("starting on_select with", component_name);
        this.setState({ active_component: components[component_name] });
    }

    on_search_focus() {
        this.setState({ focused: true });
    }

    listen(event_type, message) {
        this.setState({ focused: false });
    }

    set_visible_tools() {

        // for now just set it to all tools but need a search algorithm
        this.setState({
            visible_tools: this.state.tools
        });
    }

    on_remove() {
        this.setState({ active_component: null });
    }

    render() {
        return (
            <div id='menu'>
                <header id='menu-header'>
                    <h3>GeoTIFF.io</h3>
                </header>
                <section id='search'>
                    <form action={this.select_tool}>
                        <input 
                            id='search-input'
                            className='gt-input'
                            type='text'
                            placeholder='Search Tools'
                            onChange={this.search}
                            onFocus={this.on_search_focus}
                        />
                    </form>
                </section>
                <section id='content' className={this.state.focused ? 'focus' : ''}>
                    { <commit_msg>added searching<commit_after>let React = require('react');

let ToolButton = require('./ToolButton');

let Map = require('./Map');

let Fuse = require("fuse.js");

let _ = require("underscore");

let components = {};

let tool_info = fetch('data/tools.txt').then(response => {
    return new Promise(resolve => {
        response.text().then(str => {
            let tools = str.split('\n')
                                .filter(Boolean) // filter out blank lines
                .map(tool => tool.split('|'));

            tools.forEach(tool => components[tool[2]] = require(`./tools/${tool[2]}`));

            resolve(tools);
        });
    });
});

let build_search_engine = tool_info.then(tools => {

    var options = {
        includeScore: true,
        shouldSort: true,
        tokenize: true,
        threshold: 0.0001,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: [
            {
                name: "0",
                weight: 0.5,
            },
            {
                name: "2",
                weight: 0.2,
            }
        ]
    };

    return new Fuse(tools, options);
});

class Menu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            focused: false,
            tools: [],
            visible_tools: [],
            active_component: null
        };
        
        this.search = this.search.bind(this);
        this.select_tool = this.select_tool.bind(this);
        this.set_visible_tools = this.set_visible_tools.bind(this);
        this.on_select = this.on_select.bind(this);
        this.on_remove = this.on_remove.bind(this);
        this.on_search_focus = this.on_search_focus.bind(this);
        this.listen = this.listen.bind(this);
        
        Map.subscribe(this);
    }

    componentDidMount() {
        tool_info.then(tools => {
            this.setState({ tools });
            this.set_visible_tools();

            //load a tool if passed one in a search parameter
            var starting_tool = this.props.params.get("tool");
            console.log("starting_tool:", starting_tool);

            if (starting_tool) {
                this.on_select(starting_tool);
            }

        });
    }

    search(event) {

        let value = event.target.value.trim();
        /*
            build_search_engine only runs after the tool info is loaded,
            so we don't need the tool_info_promise
        */
        if (value === "") {
            this.setState({
                visible_tools: this.state.tools
            });
        } else {
            build_search_engine.then(fuse => {
                this.setState({
                    visible_tools: _.pluck(fuse.search(value), "item")
                });
            });
        }
    } 

    select_tool(tool) {
        console.log('selecting tool...');
    }

    on_select(component_name) {
        console.log("starting on_select with", component_name);
        this.setState({ active_component: components[component_name] });
    }

    on_search_focus() {
        this.setState({ focused: true });
    }

    listen(event_type, message) {
        this.setState({ focused: false });
    }

    set_visible_tools(visible_tools) {

        if (!visible_tools) visible_tools = this.state.tools;

        this.setState({
            visible_tools: visible_tools
        });
    }

    on_remove() {
        this.setState({ active_component: null });
    }

    render() {
        return (
            <div id='menu'>
                <header id='menu-header'>
                    <h3>GeoTIFF.io</h3>
                </header>
                <section id='search'>
                    <form action={this.select_tool}>
                        <input 
                            id='search-input'
                            className='gt-input'
                            type='text'
                            placeholder='Search Tools'
                            onChange={this.search}
                            onFocus={this.on_search_focus}
                        />
                    </form>
                </section>
                <section id='content' className={this.state.focused ? 'focus' : ''}>
                    { 
{'fraction_non_alphanumeric': 0.1263925729442971, 'fraction_numerical': 0.0034482758620689655, 'mean_word_length': 1.4716486397902326, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4170634', 'n_tokens_mistral': 2085, 'n_tokens_neox': 2005, 'n_words': 366}