const btnTextColor = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brush" viewBox="0 0 16 16">
    <!-- The MIT License (MIT) -->
    <!-- Copyright (c) 2011-2024 The Bootstrap Authors -->
    <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.1 6.1 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.1 8.1 0 0 1-3.078.132 4 4 0 0 1-.562-.135 1.4 1.4 0 0 1-.466-.247.7.7 0 0 1-.204-.288.62.62 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896q.19.012.348.048c.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04M4.705 11.912a1.2 1.2 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.4 3.4 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3 3 0 0 0 .126-.75zm1.44.026c.12-.04.277-.1.458-.183a5.1 5.1 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005zm3.582-3.043.002.001h-.002z"/>
</svg>`;

const btnBackgroundColor = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paint-bucket" viewBox="0 0 16 16">
    <!-- The MIT License (MIT) -->
    <!-- Copyright (c) 2011-2024 The Bootstrap Authors -->
    <path d="M6.192 2.78c-.458-.677-.927-1.248-1.35-1.643a3 3 0 0 0-.71-.515c-.217-.104-.56-.205-.882-.02-.367.213-.427.63-.43.896-.003.304.064.664.173 1.044.196.687.556 1.528 1.035 2.402L.752 8.22c-.277.277-.269.656-.218.918.055.283.187.593.36.903.348.627.92 1.361 1.626 2.068.707.707 1.441 1.278 2.068 1.626.31.173.62.305.903.36.262.05.64.059.918-.218l5.615-5.615c.118.257.092.512.05.939-.03.292-.068.665-.073 1.176v.123h.003a1 1 0 0 0 1.993 0H14v-.057a1 1 0 0 0-.004-.117c-.055-1.25-.7-2.738-1.86-3.494a4 4 0 0 0-.211-.434c-.349-.626-.92-1.36-1.627-2.067S8.857 3.052 8.23 2.704c-.31-.172-.62-.304-.903-.36-.262-.05-.64-.058-.918.219zM4.16 1.867c.381.356.844.922 1.311 1.632l-.704.705c-.382-.727-.66-1.402-.813-1.938a3.3 3.3 0 0 1-.131-.673q.137.09.337.274m.394 3.965c.54.852 1.107 1.567 1.607 2.033a.5.5 0 1 0 .682-.732c-.453-.422-1.017-1.136-1.564-2.027l1.088-1.088q.081.181.183.365c.349.627.92 1.361 1.627 2.068.706.707 1.44 1.278 2.068 1.626q.183.103.365.183l-4.861 4.862-.068-.01c-.137-.027-.342-.104-.608-.252-.524-.292-1.186-.8-1.846-1.46s-1.168-1.32-1.46-1.846c-.147-.265-.225-.47-.251-.607l-.01-.068zm2.87-1.935a2.4 2.4 0 0 1-.241-.561c.135.033.324.11.562.241.524.292 1.186.8 1.846 1.46.45.45.83.901 1.118 1.31a3.5 3.5 0 0 0-1.066.091 11 11 0 0 1-.76-.694c-.66-.66-1.167-1.322-1.458-1.847z"/>
</svg>`;

const btnStretched = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16">
    <!-- The MIT License (MIT) -->
    <!-- Copyright (c) 2011-2024 The Bootstrap Authors -->
    <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/>
</svg>`;

const btnUnstretched = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen-exit" viewBox="0 0 16 16">
    <!-- The MIT License (MIT) -->
    <!-- Copyright (c) 2011-2024 The Bootstrap Authors -->
    <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z"/>
</svg>`

// 
// 
// 
// const newSettingsButton = ({icon, api}) => {
//     const btn = document.createElement('div');
//     btn.type = 'button';
//     btn.innerHTML = icon;
//     btn.classList.add(
//         api.styles.settingsButton,
//     )
//     return btn;
// }
// 
// 
class BaseWagtailColorTune {
    constructor({data, api, config, readOnly, block}){
        this.api = api;
        this.data = data || {};
        this.config = config;
        this.block = block;

        if ("defaultStretched" in this.config && !("stretched" in this.data)) {
            this.data.stretched = this.config.defaultStretched;
        }

        setTimeout(() => {
            if (this.data.color) {
                this.onChange();
            }
        }, 10);
    }

    static get isTune() {
        return true;
    }

    get buttonIcon() {
        return null;
    }

    get pickTooltipText() {
        return this.api.i18n.t('Pick Color');
    }

    get blockHolder() {
        return this.block.holder;
    }

    get blockContent() {
        return this.block.holder.querySelector('.ce-block__content');
    }

    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.classList.add('editorjs-color-input-wrapper');
        this.colorInput = document.createElement('input');
        this.colorInput.type = 'color';
        this.colorInput.value = this.data.color || '#000000';
        this.colorInput.addEventListener('input', () => {
            this.data.color = this.colorInput.value;
            this.onChange();
        });
        this.clearButton = document.createElement('button');
        this.clearButton.type = 'button';
        this.clearButton.innerHTML = this.buttonIcon;
        this.clearButton.addEventListener('click', () => {
            this.colorInput.value = '#000000';
            this.data.color = null;
            this.onChange();
        });
        this.wrapper.appendChild(this.colorInput);
        this.wrapper.appendChild(this.clearButton);

        this.api.tooltip.onHover(this.colorInput, this.pickTooltipText, {
            placement: 'left',
            hidingDelay: 200,
        });
        this.api.tooltip.onHover(this.clearButton, this.api.i18n.t('Clear Color'), {
            placement: 'top',
            hidingDelay: 200,
        });
        
        return this.wrapper;
    }

    onChange() {

    }

    save(data = null){
        if (data === null) {
            data = {};
        }
        if (this.data.color) {
            data.color = this.data.color;
        }

        if (!data) {
            return undefined;
        }

        return data;
    }
}

class WagtailBackgroundColorTune extends BaseWagtailColorTune {
    get buttonIcon() {
        return btnBackgroundColor;
    }

    get pickTooltipText() {
        return this.api.i18n.t('Pick Background Color');
    }

    get stretchedTooltipText() {
        return this.data.stretched ?
            this.api.i18n.t('Unstretch Background') :
            this.api.i18n.t('Stretch Background')
    }

    render() {
        this.stretchBlockButton = document.createElement('button');
        this.stretchTextElement = document.createElement('span');
        this.stretchTextElement.innerHTML = this.stretchedTooltipText;

        if (this.data.stretched) {
            this.data.stretched = this.data.stretched;
        }

        this.stretchBlockButton.type = 'button';
        this.stretchBlockButton.innerHTML = this.data.stretched ? btnUnstretched : btnStretched;
        this.stretchBlockButton.addEventListener('click', () => {
            this.data.stretched = !this.data.stretched;
            this.onChange();
        });

        this.api.tooltip.onHover(this.stretchBlockButton, this.stretchTextElement, {
            placement: 'top',
            hidingDelay: 200,
        });

        const wrapper = super.render();
        wrapper.appendChild(this.stretchBlockButton);

        return wrapper;
    }

    onChange() {

        if (this.stretchBlockButton && this.stretchTextElement) {
            this.stretchTextElement.innerHTML = this.stretchedTooltipText;
            if (this.data.stretched) {
                this.stretchBlockButton.innerHTML = btnUnstretched;
            } else {
                this.stretchBlockButton.innerHTML = btnStretched;
            }
        }

        if (this.data.color === null || this.data.color === undefined) {
            if ("backgroundColor" in this.blockContent.dataset) {
                delete this.blockContent.dataset.backgroundColor;
            }
            if ("backgroundColor" in this.blockHolder.dataset) {
                delete this.blockHolder.dataset.backgroundColor;
            }
            this.blockContent.style.removeProperty("--block-background-color");
            this.blockHolder.style.removeProperty("--block-background-color");
            return;
        }

        if (this.data.stretched) {
            if ("backgroundColor" in this.blockContent.dataset) {
                delete this.blockContent.dataset.backgroundColor;
            }
            this.blockContent.style.removeProperty("--block-background-color");
            this.blockHolder.dataset.backgroundColor = this.data.color;
            this.blockHolder.style.setProperty("--block-background-color", this.data.color);
        } else {
            if ("backgroundColor" in this.blockHolder.dataset) {
                delete this.blockHolder.dataset.backgroundColor;
            }
            this.blockHolder.style.removeProperty("--block-background-color");
            this.blockContent.dataset.backgroundColor = this.data.color;
            this.blockContent.style.setProperty("--block-background-color", this.data.color);
        }
    }

    save(){
        return super.save({
            stretched: this.data.stretched,
        });
    }
}


class WagtailTextColorTune extends BaseWagtailColorTune {
    get buttonIcon() {
        return btnTextColor;
    }

    onChange() {
        if (this.data.color === null || this.data.color === undefined) {
            if ("color" in this.block.holder.dataset) {
                delete this.block.holder.dataset.color;
            }
            this.block.holder.style.removeProperty("--block-color");
            return;
        }

        this.block.holder.dataset.color = this.data.color;
        this.block.holder.style.setProperty("--block-color", this.data.color);
    }
}

window.BaseWagtailColorTune = BaseWagtailColorTune;
window.WagtailBackgroundColorTune = WagtailBackgroundColorTune;
window.WagtailTextColorTune = WagtailTextColorTune;