"use strict";

const { fetch_article_by_title, fetch_delete_article } = require("../xhr");
const CreateArticleForm = require("./create-article-form");

class UpdateArticleForm {
    constructor() {
        this.state = {
            search_article_title: "",
            search_result: {},
            article_to_update: {},
        }
    }

    reset() {
        this.state = {
            search_article_title: "",
            search_result: {},
            article_to_update: {},
        };

        this.refresh();
    }

    handle_search_article() {
        fetch_article_by_title(this.state.search_article_title)
            .then(res => {
                this.state.search_result = res;
                this.state.article_to_update = {};
                this.refresh_search_result();
                this.refresh_update_form();
            })
            .catch(err => alert(err));
    }

    handle_select_result() {
        this.state.article_to_update = { ...this.state.search_result };
        this.refresh_update_form();
    }

    handle_delete_article() {
        fetch_delete_article(this.state.search_result._id.$oid)
            .then(res => {
                alert(res);
                this.reset();
            })
            .catch(err => alert(err))
    }

    render_search() {
        return {
            tag: "form",
            onsubmit: e => {
                e.preventDefault();
                this.handle_search_article();
            },
            style_rules: { display: "flex", gap: "10px", width: "100%" },
            contents: [
                {
                    tag: "input", type: "text", value: this.state.search_article_title,
                    style_rules: { flex: 1 },
                    placeholder: "Search article by title",
                    oninput: e => this.state.search_article_title = e.target.value,
                },
                {
                    tag: "input", type: "submit", value: "SEARCH"
                }
            ]
        }
    }

    refresh_search_result() {
        obj2htm.subRender(
            this.render_search_result(),
            document.getElementById("update-article-form-search-result"),
            { mode: "replace" },
        );
    }

    render_search_result() {
        const { search_result } = this.state;
        return {
            tag: "div",
            id: "update-article-form-search-result",
            style_rules: {
                display: "flex",
                gap: "10px",
                alignItems: "center"
            },
            contents: search_result.title ? [
                { tag: "strong", contents: search_result.title },
                {
                    tag: "button", contents: "SELECT",
                    onclick: this.handle_select_result.bind(this)
                },
                {
                    tag: "button", contents: "DELETE",
                    onclick: this.handle_delete_article.bind(this)
                }
            ] : []
        }
    }

    refresh_update_form() {
        obj2htm.subRender(
            this.render_update_form(),
            document.getElementById("update-article-form-container"),
            { mode: "replace" },
        );
    }

    render_update_form() {
        return {
            tag: "div",
            id: "update-article-form-container",
            contents: this.state.article_to_update._id
                ? [new CreateArticleForm({ data: this.state.article_to_update }).render()]
                : []
        }
    }

    refresh() {
        obj2htm.subRender(this.render(), document.getElementById("update-article-multiform"), { mode: "replace" })
    }

    render() {
        return {
            tag: "div",
            id: "update-article-multiform",
            style_rules: {
                display: "flex",
                flexDirection: "column",
                gap: "20px",
                maxWidth: "800px",
            },
            contents: [
                this.render_search(),
                this.render_search_result(),
                this.render_update_form(),
            ]
        }
    }
}

module.exports = UpdateArticleForm;