<template>
    <aside>

        <!-- Off-canvas / background overlay -->
        <transition
            enter-active-class="transition-opacity ease-linear duration-500"
            enter-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="transition-opacity ease-linear duration-500"
            leave-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <div class="fixed inset-0 z-40" v-show="isOpen">
                <div class="absolute inset-0 bg-gray-600 opacity-75" @click="close" tabindex="-1"></div>
            </div>
        </transition>

        <!-- Off-canvas / panel -->
        <transition
            enter-active-class="transition ease-in-out duration-700 transform"
            enter-class="-translate-x-full"
            enter-to-class="translate-x-0"
            leave-active-class="transition ease-in-out duration-700 transform"
            leave-class="translate-x-0"
            leave-to-class="-translate-x-full"
        >
            <div class="fixed inset-0 flex z-40" v-show="isOpen">

                <!-- Off-canvas -->
                <div class="relative flex-1 flex flex-col w-full bg-white shadow-xl">

                    <!-- Off-canvas / toggle -->
                    <div class="absolute top-0 right-0 mt-2 -mr-14 p-1">
                        <button
                            class="flex items-center justify-center h-12 w-12 rounded-full bg-gray-500 focus:outline-none focus:bg-gray-600"
                            @click="close"
                            type="button"
                            aria-label="Close sidebar"
                        >
                            <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M6 18L18 6M6 6l12 12"
                                />
                            </svg>
                        </button>
                    </div>

                    <!-- Off-canvas / header -->
                    <div class="flex-shrink-0 py-6 px-4 sm:px-6 border-b">
                        <h2 class="text-lg leading-7 font-medium">
                            CSS Editor
                        </h2>
                    </div>

                    <!-- Off-canvas / messages -->
                    <div id="editor-container" class="flex-1 h-0 overflow-y-auto">
                        <textarea id="css-editor" name="css" style="display: none;"></textarea>
                    </div>

                    <!-- Off-canvas / actions -->
                    <div class="flex-shrink-0 px-4 py-4 border-t">
                        <div class="flex justify-end space-x-4">
                            <span class="inline-flex shadow-sm">
                                <button
                                    class="py-2 px-4 border border-gray-300 text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out uppercase"
                                    type="button"
                                    @click.prevent="close"
                                >
                                    Cancel
                                </button>
                            </span>
                            <span class="inline-flex shadow-sm">
                                <button
                                    class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium text-white bg-primary-600 hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary active:bg-primary-700 transition duration-150 ease-in-out uppercase"
                                    type="button"
                                    @click.prevent="save"
                                >
                                    Save Changes
                                </button>
                            </span>
                        </div>
                    </div>

                </div>

                <!-- Dummy element to force sidebar to shrink to fit close icon -->
                <div class="flex-shrink-0 w-14 md:w-3/12 lg:w-6/12" @click="close"></div>
            </div>
        </transition>

    </aside>
</template>

<script>
import CodeMirror from "codemirror/lib/codemirror";

// Modes
import "codemirror/mode/css/css";

// Key bindings
import "codemirror/keymap/sublime";

// Addons
import "codemirror/addon/edit/closebrackets";
import "codemirror/addon/edit/closetag";
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/edit/matchtags";
import "codemirror/addon/edit/trailingspace";
import "codemirror/addon/display/autorefresh";
import "codemirror/addon/selection/active-line";

// Hints
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/css-hint";

export default {
    props : {
        css : {
            type : String,
            default : null
        },
    },

    data() {
        return {
            isOpen : false,
            code : "/* Enter custom css here */ \n",
            editor : null
        }
    },

    methods : {
        open() {
            this.isOpen = true;
            this.editor.focus();
            this.editor.refresh();
            this.editor.execCommand('goDocEnd')
        },
        close() {
            this.isOpen = false;
        },
        save() {
            this.editor.save();
            this.close();
        }
    },
    mounted() {
        window.EventBus.$on('openCssEditor', () => this.open());
        window.EventBus.$on('closeCssEditor', () => this.close());

        if (this.css) {
            this.code = this.css;
        }

        let _this = this;
        this.editor = CodeMirror.fromTextArea(document.getElementById("css-editor"), {
            lineNumbers : true,
            indentUnit : 4,
            theme : "material-ocean",
            mode : 'css',

            // Key map
            keyMap : 'sublime',
            extraKeys : {
                "Tab" : "autocomplete"
            },

            // Addons
            autoCloseBrackets : true,
            autoCloseTags : true,
            matchBrackets : true,
            matchTags : true,
            showTrailingSpace : true,
            autoRefresh : true,
            styleActiveLine : true,
            showHint : true,
            hint : CodeMirror.hint.css,
        });

        // Set the content of the editor
        this.editor.setValue(this.code);
    },
}
</script>
