import React, { useState, useEffect, useRef } from "react";
import { FormBuilder, Loader, Button, Icon } from "../../components/";
import { Config, Log } from "../../model/";
import { FormObjToJSON, notify, format, nop } from "../../helpers/";
import { t } from "../../locales/";

import "./logger.scss";

export function LogPage({ isSaving = nop }) {
    const [log, setLog] = useState("");
    const [form, setForm] = useState({});
    const [config, setConfig] = useState({});
    const $log = useRef();
    const filename = () => {
        const t = new Date().toISOString().substring(0,10).replace(/-/g, "");
        return `access_${t}.log`;
    };
    const onChange = (r) => {
        const c = Object.assign({}, config)
        c["log"] = r[""]["params"];
        c["connections"] = window.CONFIG.connections;
        delete c["constant"]
        isSaving(true);
        Config.save(c, true, () => {
            isSaving(false);
        }, () => {
            isSaving(false);
            notify.send(err && err.message || t("Oops"), "error");
        });
    };
    const fetchLogs = () => {
        Log.get(1024*100).then((log) => { // get only the last 100kb of log
            setLog(log + "\n\n\n\n\n");
            if($log.current.scrollTop === 0) {
                $log.current.scrollTop = $log.current.scrollHeight;
            }
        });
    };

    useEffect(() => {
        Config.all().then((config) => {
            setForm({"":{"params":config["log"]}});
            setConfig(FormObjToJSON(config));
        });
        fetchLogs();
        const id = setInterval(fetchLogs, 5000);
        return () => clearInterval(id)
    }, []);

    return (
        <div className="component_logpage">
            <h2>Logging</h2>
            <div style={{minHeight: "150px"}}>
                <FormBuilder
                    form={form}
                    onChange={onChange}
                    render={ ($input, props, struct, onChange) => (
                        <label className={"no-select input_type_" + props.params["type"]}>
                            <div>
                                <span>
                                    { format(struct.label) }:
                                </span>
                                <div style={{width: "100%"}}>
                                    { $input }
                                </div>
                            </div>
                            <div>
                                <span className="nothing"></span>
                                <div style={{width: "100%"}}>
                                    {
                                        struct.description ? (<div className="description">{struct.description}</div>) : null
                                    }
                                </div>
                            </div>
                        </label>
                    )} />
            </div>
            <pre style={{height: "350px"}} ref={$log}>
                { log === "" ? <Loader/> : log }
            </pre>
            <div>
                <a href={Log.url()} download={filename()}><Button className="primary">{ t("Download") }</Button></a>
            </div>
        </div>
    );
}