/*
 * This file is part of caronte (https://github.com/eciavatta/caronte).
 * Copyright (c) 2020 Emiliano Ciavatta.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import React, {Component} from 'react';
import './common.scss';
import './SearchPane.scss';
import Table from "react-bootstrap/Table";
import InputField from "../fields/InputField";
import TextField from "../fields/TextField";
import backend from "../../backend";
import ButtonField from "../fields/ButtonField";
import LinkPopover from "../objects/LinkPopover";
import {createCurlCommand, dateTimeToTime, durationBetween} from "../../utils";
import dispatcher from "../../dispatcher";
import TagField from "../fields/TagField";
import CheckField from "../fields/CheckField";

const _ = require('lodash');

class SearchPane extends Component {

    searchOptions = {
        "text_search": {
            "terms": null,
            "excluded_terms": null,
            "exact_phrase": "",
            "case_sensitive": false
        },
        "regex_search": {
            "pattern": "",
            "not_pattern": "",
            "case_insensitive": false,
            "multi_line": false,
            "ignore_whitespaces": false,
            "dot_character": false
        },
        "timeout": 10
    };

    state = {
        searches: [],
        currentSearchOptions: this.searchOptions,
    };

    componentDidMount() {
        this.reset();
        this.loadSearches();

        dispatcher.register("notifications", payload => {
            if (payload.event === "searches.new") {
                this.loadSearches();
            }
        });

        document.title = "caronte:~/searches$";
    }

    loadSearches = () => {
        backend.get("/api/searches")
            .then(res => this.setState({searches: res.json, searchesStatusCode: res.status}))
            .catch(res => this.setState({searchesStatusCode: res.status, searchesResponse: JSON.stringify(res.json)}));
    };

    performSearch = () => {
        const options = this.state.currentSearchOptions;
        if (this.validateSearch(options)) {
            backend.post("/api/searches/perform", options).then(res => {
                this.reset();
                this.setState({searchStatusCode: res.status});
                this.loadSearches();
                this.viewSearch(res.json.id);
            }).catch(res => {
                this.setState({searchStatusCode: res.status, searchResponse: JSON.stringify(res.json)});
            });
        }
    };

    reset = () => {
        this.setState({
            currentSearchOptions: _.cloneDeep(this.searchOptions),
            exactPhraseError: null,
            patternError: null,
            notPatternError: null,
            searchStatusCode: null,
            searchesStatusCode: null,
            searchResponse: null,
            searchesResponse: null
        });
    };

    validateSearch = (options) => {
        let valid = true;
        if (options.text_search.exact_phrase && options.text_search.exact_phrase.length < 3) {
            this.setState({exactPhraseError: "text_search.exact_phrase.length < 3"});
            valid = false;
        }
        if (options.regex_search.pattern && options.regex_search.pattern.length < 3) {
            this.setState({patternError: "regex_search.pattern.length < 3"});
            valid = false;
        }
        if (options.regex_search.not_pattern && options.regex_search.not_pattern.length < 3) {
            this.setState({exactPhraseError: "regex_search.not_pattern.length < 3"});
            valid = false;
        }

        return valid;
    };

    updateParam = (callback) => {
        callback(this.state.currentSearchOptions);
        this.setState({currentSearchOptions: this.state.currentSearchOptions});
    };

    extractPattern = (options) => {
        let pattern = "";
        if (_.isEqual(options.regex_search, this.searchOptions.regex_search)) { // is text search
            if (options.text_search.exact_phrase) {
                pattern += `"${options.text_search.exact_phrase}"`;
            } else {
                pattern += options.text_search.terms.join(" ");
                if (options.text_search.excluded_terms) {
                    pattern += " -" + options.text_search.excluded_terms.join(" -");
                }
            }
            options.text_search.case_sensitive && (pattern += "/s");
        } else { // is regex search
            if (options.regex_search.pattern) {
                pattern += "/" + options.regex_search.pattern + "/";
            } else {
                pattern += "!/" + options.regex_search.not_pattern + "/";
            }
            options.regex_search.case_insensitive && (pattern += "i");
            options.regex_search.multi_line && (pattern += "m");
            options.regex_search.ignore_whitespaces && (pattern += "x");
            options.regex_search.dot_character && (pattern += "s");
        }

        return pattern;
    };

    viewSearch = (searchId) => {
        dispatcher.dispatch("connections_filters", {"performed_search": searchId});
    };

    render() {
        const options = this.state.currentSearchOptions;

        let searches = this.state.searches.map(s =>
            <tr key={s.id} className="row-small row-clickable">
                <td>{s.id.substring(0, 8)}</td>
                <td>{this.extractPattern(s["search_options"])}</td>
                <td>{s["affected_connections_count"]}</td>
                <td>{dateTimeToTime(s["started_at"])}</td>
                <td>{durationBetween(s["started_at"], s["finished_at"])}</td>
                <td><ButtonField name="view" variant="green" small onClick={() => this.viewSearch(s.id)}/></td>
            </tr>
        );

        const textOptionsModified = !_.isEqual(this.searchOptions.text_search, options.text_search);
        const regexOptionsModified = !_.isEqual(this.searchOptions.regex_search, options.regex_search);

        const curlCommand = createCurlCommand("/searches/perform", "POST", options);

        return (
            <div className="pane-container search-pane">
                <div className="pane-section searches-list">
                    <div className="section-header">
                        <span className="api-request">GET /api/searches</span>
                        {this.state.searchesStatusCode &&
                        <span className="api-response"><LinkPopover text={this.state.searchesStatusCode}
                                                                    content={this.state.searchesResponse}
                                                                    placement="left"/></span>}
                    </div>

                    <div className="section-content">
                        <div className="section-table">
                            <Table borderless size="sm">
                                <thead>
                                <tr>
                                    <th>id</th>
                                    <th>pattern</th>
                                    <th>occurrences</th>
                                    <th>started_at</th>
                                    <th>duration</th>
                                    <th>actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                {searches}
                                </tbody>
                            </Table>
                        </div>
                    </div>
                </div>

                <div className="pane-section search-new">
                    <div className="section-header">
                        <span className="api-request">POST /api/searches/perform</span>
                        <span className="api-response"><LinkPopover text={this.state.searchStatusCode}
                                                                    content={this.state.searchResponse}
                                                                    placement="left"/></span>
                    </div>

                    <div className="section-content">
                        <span className="notes">
                        NOTE: it is recommended to use the rules for recurring themes. Give preference to textual search over that with regex.
                    </span>

                        <div className="content-row">
                            <div className="text-search">
                                <TagField tags={(options.text_search.terms || []).map(t => {return {name: t};})}
                                          name="terms" min={3} inline allowNew={true}
                                          readonly={regexOptionsModified || options.text_search.exact_phrase}
                                          onChange={(tags) => this.updateParam(s => s.text_search.terms = tags.map(t => t.name))}/>
                                <TagField tags={(options.text_search.excluded_terms || []).map(t => {return {name: t};})}
                                          name="excluded_terms" min={3} inline allowNew={true}
                                          readonly={regexOptionsModified || options.text_search.exact_phrase}
                                          onChange={(tags) => this.updateParam(s => s.text_search.excluded_terms = tags.map(t => t.name))}/>

                                <span className="exclusive-separator">or</span>

                                <InputField name="exact_phrase" value={options.text_search.exact_phrase} inline
                                            error={this.state.exactPhraseError}
                                            onChange={v => this.updateParam(s => s.text_search.exact_phrase = v)}
                                            readonly={regexOptionsModified || (Array.isArray(options.text_search.terms) && options.text_search.terms.length > 0)}/>

                                <CheckField checked={options.text_search.case_sensitive} name="case_sensitive"
                                            readonly={regexOptionsModified} small
                                            onChange={(v) => this.updateParam(s => s.text_search.case_sensitive = v)}/>
                            </div>

                            <div className="separator">
                                <span>or</span>
                            </div>

                            <div className="regex-search">
                                <InputField name="pattern" value={options.regex_search.pattern} inline
                                            error={this.state.patternError}
                                            readonly={textOptionsModified || options.regex_search.not_pattern}
                                            onChange={v => this.updateParam(s => s.regex_search.pattern = v)}/>
                                <span className="exclusive-separator">or</span>
                                <InputField name="not_pattern" value={options.regex_search.not_pattern} inline
                                            error={this.state.notPatternError}
                                            readonly={textOptionsModified || options.regex_search.pattern}
                                            onChange={v => this.updateParam(s => s.regex_search.not_pattern = v)}/>

                                <div className="checkbox-line">
                                    <CheckField checked={options.regex_search.case_insensitive} name="case_insensitive"
                                                readonly={textOptionsModified} small
                                                onChange={(v) => this.updateParam(s => s.regex_search.case_insensitive = v)}/>
                                    <CheckField checked={options.regex_search.multi_line} name="multi_line"
                                                readonly={textOptionsModified} small
                                                onChange={(v) => this.updateParam(s => s.regex_search.multi_line = v)}/>
                                    <CheckField checked={options.regex_search.ignore_whitespaces}
                                                name="ignore_whitespaces"
                                                readonly={textOptionsModified} small
                                                onChange={(v) => this.updateParam(s => s.regex_search.ignore_whitespaces = v)}/>
                                    <CheckField checked={options.regex_search.dot_character} name="dot_character"
                                                readonly={textOptionsModified} small
                                                onChange={(v) => this.updateParam(s => s.regex_search.dot_character = v)}/>
                                </div>
                            </div>
                        </div>

                        <TextField value={curlCommand} rows={3} readonly small={true}/>
                    </div>

                    <div className="section-footer">
                        <ButtonField variant="red" name="cancel" bordered onClick={this.reset}/>
                        <ButtonField variant="green" name="perform_search" bordered onClick={this.performSearch}/>
                    </div>
                </div>
            </div>
        );
    }

}

export default SearchPane;