"use strict";

const { fetch_post_article } = require("../xhr");

class CreateArticleForm {
    constructor() {
        this.state = {
            output: {
                title: "",
                subtitle: "",
                category: "",
                details: [],
                images: [],
                body: "",
            }
        }
    }

    handle_text_input(field, e) {
        this.state.output[field] = e.target.value;
    }

    handle_del_detail(index) {
        this.state.output.details.splice(index, 1);
        this.refresh_details();
    }

    handle_add_detail() {
        this.state.output.details.push({ label: "", value: "" });
        this.refresh_details();
    }

    handle_del_image(index) {
        this.state.output.images.splice(index, 1);
        this.refresh_images();
    }

    handle_add_image() {
        this.state.output.images.push("")
        this.refresh_images();
    }

    refresh_details() {
        obj2htm.subRender(
            this.render_details_inputs(),
            document.getElementById("create-article-form-details"),
            { mode: "replace" }
        );
    }

    render_details_inputs() {
        return {
            tag: "ul",
            style_rules: {
                gridColumn: "1 / span 2",
                display: "flex",
                flexDirection: "column",
                gap: "10px",
                listStyleType: "none",
                padding: 0,
            },
            id: "create-article-form-details",
            contents: this.state.output.details.map((detail, i) => {
                return {
                    tag: "li",
                    style_rules: {
                        display: "grid",
                        gridTemplateColumns: "200px auto 60px",
                        gap: "10px",
                    },
                    contents: [
                        {
                            tag: "input",
                            type: "text",
                            placeholder: "Label",
                            value: detail.label,
                            oninput: e => {
                                this.state.output.details[i].label = e.target.value;
                            }
                        },
                        {
                            tag: "input",
                            type: "text",
                            placeholder: "Value",
                            value: detail.value,
                            oninput: e => {
                                this.state.output.details[i].value = e.target.value;
                            }
                        },
                        {
                            tag: "button", contents: "DEL",
                            onclick: this.handle_del_detail.bind(this, i)
                        }
                    ]
                }
            }).concat([
                {
                    tag: "li", contents: [{
                        tag: "button", contents: "ADD DETAIL",
                        onclick: this.handle_add_detail.bind(this)
                    }]
                }
            ])
        }
    }

    refresh_images() {
        obj2htm.subRender(
            this.render_images_inputs(),
            document.getElementById("create-article-form-images"),
            { mode: "replace" }
        );
    }

    render_images_inputs() {
        return {
            tag: "ul",
            style_rules: {
                gridColumn: "1 / span 2",
                display: "flex",
                flexDirection: "column",
                gap: "10px",
                listStyleType: "none",
                padding: 0,
            },
            id: "create-article-form-images",
            contents: this.state.output.images.map((img, i) => {
                return {
                    tag: "li",
                    style_rules: {
                        display: "grid",
                        gridTemplateColumns: "300px 60px",
                        gap: "10px",
                    },
                    contents: [
                        {
                            tag: "input",
                            type: "text",
                            placeholder: "image file name",
                            value: img,
                            oninput: e => {
                                this.state.output.images[i] = e.target.value;
                            }
                        },
                        {
                            tag: "button", contents: "DEL",
                            onclick: this.handle_del_image.bind(this, i)
                        }
                    ]
                }
            }).concat([
                {
                    tag: "li", contents: [{
                        tag: "button", contents: "ADD IMAGE",
                        onclick: this.handle_add_image.bind(this)
                    }]
                }
            ])
        }
    }

    render() {
        return {
            tag: "form",
            style_rules: {
                display: "grid",
                maxWidth: "800px",
                gridTemplateColumns: "1fr 1fr",
                gap: "20px",
            },
            onsubmit: e => {
                e.preventDefault();
                console.log("will post output", this.state.output)
                // fetch_post_article(this.state.output)
                //     .then(res => console.log(res))
                //     .catch(err => console.log(err))
            },
            contents: [
                {
                    tag: "input", type: "text", placeholder: "category",
                    value: this.state.output.category,
                    oninput: this.handle_text_input.bind(this, "category")
                },
                {
                    tag: "input", type: "text",
                    placeholder: "Article title",
                    value: this.state.output.title,
                    oninput: this.handle_text_input.bind(this, "title")
                },
                {
                    tag: "input", type: "text",
                    style_rules: {
                        gridColumn: "1 / span 2"
                    },
                    placeholder: "Article subtitle",
                    value: this.state.output.subtitle,
                    oninput: this.handle_text_input.bind(this, "subtitle")
                },
                {
                    tag: "textarea",
                    style_rules: {
                        gridColumn: "1 / span 2",
                        height: "300px",
                    },
                    placeholder: "Article body",
                    oninput: this.handle_text_input.bind(this, "body")
                },
                this.render_details_inputs(),
                this.render_images_inputs(),
                { tag: "input", type: "submit" }
            ]
        }
    }
}

module.exports = CreateArticleForm;