"use strict";

import { COMMANDS } from './costants.js'

let FEATURES = {}
let LOGS = {}

class Admin {
    constructor () {
    return (async () => {
        const element = document.createElement('div');
        element.classList.add('admin');
        
        const header = document.createElement('h2');
        header.innerHTML = "Настройки TemaBot"
        element.append(header);

        const divider0 = new Divider("Фичи:")
        element.append(divider0.element)

        FEATURES = await Admin.getFeatures()
        console.log("!!! FEATURES", FEATURES)
        const features = new Features(FEATURES)
        element.append(features.element)

        const applyButton = new Button(COMMANDS[2].name, COMMANDS[2].uid, handleApplyButton)
        element.append(applyButton.element)

        const divider1 = new Divider("Контент:")
        element.append(divider1.element)

        const downloadButton = new Button("Скачать контент", "download", handleDownloadButton)
        element.append(downloadButton.element)

        const upload = new Upload("Загрузить контент", "upload", handleSubmit)
        element.append(upload.element)

        const divider2 = new Divider("Логи:")
        element.append(divider2.element)

        LOGS = await Admin.getLogs()
        console.log("!!! LOGS", LOGS)
        const showLogsButton = new Button("Посмотреть логи", "showLogs", handleShowLogsButton)
        element.append(showLogsButton.element)
        const clearLogsButton = new Button("Очистить логи", "clearLogs", handleClearLogsButton)
        element.append(clearLogsButton.element)

        const modal = new Modal(JSON.stringify(LOGS, null, '\\n'), handleModalClose)
        element.append(modal.element)

        const divider3 = new Divider("Рассылка:")
        element.append(divider3.element)

        const mailing = await Admin.getMailing()
        console.log("!!! MAILING", mailing)

        const mailingSwitch = new Switch(mailing.status, "Рассылка", "mailingSwitch", handleMailingSwitch)

        element.append(mailingSwitch.element)

        const divider4 = new Divider("Подписки:")
        element.append(divider4.element)

        const subscription = await Admin.getSubscriptionMailing()
        console.log("!!! MAILING", subscription)

        const subscriptionSwitch = new Switch(subscription.status, "Подписки", "subscriptionSwitch", handleSubscriptionSwitch)
        const subscriptionTimeInput = new TimeInput(subscription.time ,"Время рассылки", "subscriptionTimeInput", handleSubscriptionTime)
        const group = new Group('row', subscriptionTimeInput.element, subscriptionSwitch.element)
        
        element.append(group.element)

        this.element = element
        return this
    })();
    }

    static async getFeatures() {
        const response = await fetch('/settings/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            body: JSON.stringify({})
        })
        if (response.ok) {
            return await response.json();
        } else {
            alert("Не получили настройки :( Ошибка HTTP: " + response.status);
            return {}
        }
    }

    static async getMailing() {
        const response = await fetch('/settings/mailing', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            body: JSON.stringify({})
        })
        if (response.ok) {
            return await response.json();
        } else {
            alert("Не смогли получить рассылки :( Ошибка HTTP: " + response.status);
            return {}
        }
    }

    static async getSubscriptionMailing() {
        const response = await fetch('/settings/mailing/subscription', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            body: JSON.stringify({})
        })
        if (response.ok) {
            return await response.json();
        } else {
            alert("Не смогли получить рассылки :( Ошибка HTTP: " + response.status);
            return {}
        }
    }

    static async getLogs() {
        const response = await fetch('/settings/logs', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            body: JSON.stringify({})
        })
        if (response.ok) {
            return await response.json();
        } else {
            alert("Не смогли получить логи :( Ошибка HTTP: " + response.status);
            return {}
        }
    }

    static async clearLogs() {
        const response = await fetch('/settings/logs/clear', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            body: JSON.stringify({})
        })
        if (response.ok) {
            return await response.json();
        } else {
            alert("Не смогли очистить логи :( Ошибка HTTP: " + response.status);
            return {}
        }
    }

    setStatusName(name) {
        this.status.setName(name)
    }
}

class Features {
    constructor (features) {
        const element = document.createElement('div');
        Object.entries(features).forEach(([key, value]) => {
            const { name, available, readonly } = value
            const checkbox = new Checkbox(name, key, available, readonly);
            element.append(checkbox.element);

        })
        
        this.element = element;
    }
}

class Divider {
    constructor (title) {
        const element = document.createElement('div')
        element.classList.add('divider');
        
        const hr = document.createElement('hr')
        hr.classList.add('divider_hr');
        element.append(hr);

        if (title) {
            const h3 = document.createElement('h3');
            h3.classList.add('divider_h3');
            h3.innerHTML = title
            element.append(h3);
        }

        this.element = element;
    }
}

class Modal {
    constructor (text, onClose) {
        const element = document.createElement('div');
        element.classList.add('modal');

        const content = document.createElement('div');
        content.classList.add('modal-content');
        element.append(content);

        const close = document.createElement('button');
        close.classList.add('modal-close');
        close.append("X");
        close.addEventListener(
            'click',
            () => {
                onClose();
            }
        )
        content.append(close);
        
        const new_text = text.replaceAll("\\n", "")
        const p = document.createElement('pre');
        p.classList.add('modal-text');
        p.append(new_text);
        content.append(p);

        window.onclick = function(event) {
            if (event.target == element) {
                element.style.display = "none";
            }
        }

        this.element = element;
    }
}

class Button {
    constructor (name, uid, onClick) {
        const element = document.createElement('button');
        element.append(name);
        element.classList.add('button');
        element.setAttribute('data-name', name)
        element.setAttribute('data-uid', uid)
        element.addEventListener(
            'click',
            () => {
                onClick(this.element);
            }
        )
        this.element = element;
    }
}

class Group {
    constructor (direction, ...elements) {
        const div = document.createElement('div');
        div.classList.add('group');
        if (direction === 'column') {
            div.classList.add('direction_column'); 
        } else if (direction === 'row') {
            div.classList.add('direction_row'); 
        }
        for (const element of elements) {
            div.append(element)
        }

        this.element = div;
    }
}

class Switch {
    constructor (status, name, uid, onClick) {
        const element = document.createElement('label');
        element.classList.add('switch');

        const input = document.createElement('input');
        if (status === 'checked') {
            input.setAttribute('checked', "true");
        }
        input.setAttribute('type', "checkbox");
        input.setAttribute('data-name', name)
        input.setAttribute('data-uid', uid)
        input.addEventListener(
            'click',
            () => {
                onClick(input);
            }
        )
        const span = document.createElement('span');
        span.classList.add('slider');
        span.classList.add('round');
        
        element.append(input);
        element.append(span);
        
        this.element = element;
    }
}

class TimeInput {
    constructor (time, name, uid, onBlur ) {
        const element = document.createElement('input');
        element.setAttribute('id', uid);
        element.setAttribute('type', "time");
        element.setAttribute('min', "00.00");
        element.setAttribute('max', "23.59");
        element.setAttribute('value', time)
        element.classList.add('timeInput');

        element.setAttribute('data-name', name)
        element.setAttribute('data-uid', uid)
        element.addEventListener(
            'blur',
            () => {
                onBlur(element);
            }
        )
        this.element = element;
    }
}

class Upload {
    constructor (name, uid, onSubmit) {
        const form = document.createElement('form');
        form.setAttribute('action', "/upload/");
        form.setAttribute('method', "post");
        form.setAttribute('enctype', "multipart/form-data");
        form.addEventListener('submit', onSubmit);

        const label = document.createElement('label');
        label.setAttribute('for', "file");
        label.append("Файл: ");
        form.append(label);

        const input = document.createElement('input');
        input.setAttribute('id', "file");
        input.setAttribute('name', "file");
        input.setAttribute('type', "file");
        form.append(input);

        const button = document.createElement('button');
        button.classList.add('button');
        button.setAttribute('data-name', name);
        button.setAttribute('data-uid', uid);
        button.append(name);
        this.button = button
        form.append(button);

        this.element = form;
    } 
}

class Checkbox {
    constructor (name, uid, available, readonly) {
        const element = document.createElement('div');
        const label = document.createElement('label');
        
        const checkbox = document.createElement('input');
        checkbox.setAttribute('type', 'checkbox');
        checkbox.setAttribute('data-name', name);
        checkbox.setAttribute('data-uid', uid);
        checkbox.setAttribute('data-available', available);
        if (available === 'true') {
            checkbox.setAttribute('checked','');
        }
        if (readonly === 'true') {
            checkbox.setAttribute('disabled','');
        }

        checkbox.addEventListener(
            'change',
            () => {
                changeCheckbox(checkbox);
            }
        )

        label.append(checkbox)
        label.append(name)
        
        element.append(label) 

        this.element = element;
    }
}

const admin = await new Admin();
document
    .getElementById('root')
    .append(admin.element)

function changeCheckbox(checkbox) {
    console.log(checkbox.dataset.name, checkbox.checked, checkbox.dataset.uid)
    const feature = FEATURES[checkbox.dataset.uid]
    feature.available = checkbox.checked ? "true" : "false"
}

function specialHandle (data, fetchComponent) {
    fetch(fetchComponent, {
        method: "POST",
        headers: { 'Content-Type': 'application/json;charset=utf-8' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        console.log("result", result)
    })
    .catch((error) => console.log(error));
}

function handleApplyButton (button) {
    console.log("click", button.dataset.name, button.dataset.uid);
    const data = { command: button.dataset.uid, features: FEATURES}
    const fetchComponent = `/tasks/`
    specialHandle(data, fetchComponent)
}

function handleMailingSwitch (input) {
    console.log("click", input.dataset.name, input.dataset.uid, input.checked)
    const data = { status: input.checked}
    const fetchComponent = `/settings/mailing/mailing_set`
    specialHandle(data, fetchComponent)
}

function handleSubscriptionSwitch (input) {
    console.log("click", input.dataset.name, input.dataset.uid, input.checked)
    const data = { status: input.checked}
    const fetchComponent = `/settings/mailing/subscription/set`
    specialHandle(data, fetchComponent)
}

function handleSubscriptionTime (input) {
    console.log("click", input.dataset.name, input.dataset.uid, input.checked)
    const data = { time: input.value }
    const fetchComponent = `/settings/mailing/subscription/set`
    specialHandle(data, fetchComponent)
}

function handleDownloadButton (button) {
    console.log("click", button.dataset.name, button.dataset.uid);
    window.location='./download';
}

function handleShowLogsButton (button) {
    console.log("click", button.dataset.name, button.dataset.uid);
    const modal = document.getElementsByClassName("modal")[0];
    modal.style.display = "block";
}

function handleClearLogsButton (button) {
    console.log("click", button.dataset.name, button.dataset.uid);
    Admin.clearLogs()
}

function handleModalClose () {
    console.log("click", "handleModalClose");
    const modal = document.getElementsByClassName("modal")[0];
    modal.style.display = "none";
}

/** @param {Event} event */
function handleSubmit(event) {
    /** @type {HTMLFormElement} */
    const form = event.currentTarget;
    const url = new URL(form.action);
    const formData = new FormData(form);
    const searchParams = new URLSearchParams(formData);
    /** @type {Parameters<fetch>[1]} */
    const fetchOptions = {
        method: form.method,
    };
    if (form.method.toLowerCase() === 'post') {
        if (form.enctype === 'multipart/form-data') {
            fetchOptions.body = formData;
        } else {
            fetchOptions.body = searchParams;
        }
    } else {
        url.search = searchParams;
    }
    fetch(url, fetchOptions)
    .then(response => response.json())
    .then(result => {
        alert(result.ok)
        console.log("result", result)
    })
    .catch((error) => console.log(error));
    event.preventDefault();
}

function ready(callback) {
    if (document.readyState !== 'loading') {
        callback();
        return;
    }
    document.addEventListener('DOMContentLoaded', callback);
}

ready(function() {
    console.log('document ready')
})