/*
 * Copyright (C) 2022  Aravinth Manivannan <realaravinth@batsense.net>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * 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 Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
use tracing::{debug, error, info};
use web_sys::{HtmlInputElement, HtmlTextAreaElement};
use yew::prelude::*;

const JSON: &str = "JSON";
const YAML: &str = "YAML";
const TOML: &str = "TOML";

#[function_component]
pub fn Validator() -> Html {
    let format_value_handle = use_state(|| TOML.to_string());

    let input_value_handle = use_state(String::default);
    let input_value = (*input_value_handle).clone();

    let config = input_value_handle.clone();
    let format = format_value_handle.clone();
    let onsubmit = {
        move |e: SubmitEvent| {
            e.prevent_default();

            let form = e.target().unwrap();
            debug!("Received form submit: {:?}", form);
            debug!("Received form submit: {:?}", &config);
            debug!("Received form submit: {:?}", format);

            if format.as_str() == JSON {
                let _config: libconfig::Config = serde_json::from_str(&config).unwrap();
                info!("All good");
            } else if format.as_str() == YAML {
                let _config: libconfig::Config = serde_yaml::from_str(config.as_str()).unwrap();
                info!("All good");
            } else if format.as_str() == TOML {
                let _config: libconfig::Config = toml::from_str(config.as_str()).unwrap();
                info!("All good");
            } else {
                error!("Unknown format: {}", format.as_str());
            }
        }
    };

    let on_input_change = Callback::from(move |e: InputEvent| {
        let value = input_value_handle.clone();
        // You must KNOW target is a HtmlInputElement, otherwise
        // the call to value would be Undefined Behaviour (UB).
        value.set(e.target_unchecked_into::<HtmlTextAreaElement>().value());
        info!("Changing configuration value: {:?}", input_value_handle)
    });

    let on_format_change = Callback::from(move |e: InputEvent| {
        let value = format_value_handle.clone();
        // You must KNOW target is a HtmlInputElement, otherwise
        // the call to value would be Undefined Behaviour (UB).
        let target = e.target_unchecked_into::<HtmlInputElement>();
        info!("Received radio value: {:?}", target.value());
        value.set(target.value());
        target.checked();
        info!("Changing radio value: {:?}", value)
    });

    html! {
        <form class="libconfig__form" {onsubmit}>
            <h1>{"Validate LibrePages Configuration"}</h1>
            <label class="libconfig__label" for="libconfig__config-text">
                {"Configuration"}
                <textarea
                    autofocus=true
                    required=true
                    id="libconfig__config-text"
                    class="libconfig__input"
                    oninput={on_input_change}
                    value={input_value.clone()}
                />
            </label>
            <fieldset class="libconfig__filedset">
                <legend>{"File Format"}</legend>
                <div>
                    <input
                        type="radio"
                        id="toml"
                        name="file_format"
                        value={TOML}
                        required=true
                        oninput={on_format_change.clone()}
                    />
                    <label for="toml">{TOML}</label>
                </div>

                <div>
                    <input
                        oninput={on_format_change.clone()}
                        type="radio"
                        id="yaml"
                        name="file_format"
                        value={YAML}
                    />
                    <label for="yaml">{YAML}</label>
                </div>

                <div>
                    <input
                        oninput={on_format_change.clone()}
                        type="radio"
                        id="json"
                        name="file_format"
                        value={JSON}
                    />
                    <label for="json">{JSON}</label>
                </div>
             </fieldset>

            <button type="submit" class="libconfig__form-button">{"Check"}</button>
        </form>
    }
}