<template>
    <div>
        <Menu />
        <b-container class="messege-container">
            <div class="preset-div">
                <b-row>
                    <b-col>
                        <b-form-select v-model="selected" :options="presets" />
                    </b-col>
                    <b-col cols="2">
                        <b-button-group class="mr-1">
                            <b-button title="Save Preset" variant="primary" @click="savePreset()">
                                <b-icon icon="cloud-upload" />
                            </b-button>
                            <b-button title="New Preset" variant="primary" @click="openDialog()">
                                <b-icon-file-plus />
                            </b-button>
                            <b-button title="Delete Preset" variant="primary" @click="deleteDialog()">
                                <b-icon-file-minus />
                            </b-button>
                        </b-button-group>
                    </b-col>
                </b-row>
            </div>
            <b-form @submit.prevent="submitMessage">
                <b-form-group>
                    <b-form-textarea
                        v-model="form.text"
                        placeholder="Message"
                        rows="7"
                        class="message"
                    />
                </b-form-group>

                <b-row>
                    <b-col>
                        <b-form-group>
                            <b-form-input
                                id="input-1"
                                v-model="form.x"
                                type="text"
                                required
                                placeholder="X"
                            />
                        </b-form-group>

                        <b-form-group>
                            <b-form-input
                                id="input-2"
                                v-model="form.y"
                                type="text"
                                required
                                placeholder="Y"
                            />
                        </b-form-group>

                        <b-row>
                            <b-col>
                                <b-form-group
                                    label="Size"
                                    label-for="input-3"
                                >
                                    <b-form-input
                                        id="input-3"
                                        v-model="form.fontSize"
                                        type="number"
                                        required
                                        value="24"
                                    />
                                </b-form-group>
                            </b-col>
                            <b-col>
                                <b-form-group
                                    label="Spacing"
                                    label-for="input-4"
                                >
                                    <b-form-input
                                        id="input-4"
                                        v-model="form.fontSpacing"
                                        type="number"
                                        required
                                        value="4"
                                    />
                                </b-form-group>
                            </b-col>
                        </b-row>

                        <b-row>
                            <b-col>
                                <b-form-group
                                    label="Font Color"
                                    label-for="input-5"
                                >
                                    <b-form-input
                                        id="input-5"
                                        v-model="form.fontColor"
                                        type="color"
                                        required
                                    />
                                </b-form-group>
                            </b-col>
                            <b-col>
                                <b-form-group
                                    label="Font Alpha"
                                    label-for="input-6"
                                >
                                    <b-form-input
                                        id="input-6"
                                        v-model="form.fontAlpha"
                                        type="number"
                                        min="0"
                                        max="1"
                                        step="0.01"
                                    />
                                </b-form-group>
                            </b-col>
                        </b-row>
                    </b-col>
                    <b-col>
                        <b-form-checkbox
                            v-model="form.showBox"
                            style="margin-bottom: 8px;"
                        >
                            Show Box
                        </b-form-checkbox>

                        <b-row>
                            <b-col>
                                <b-form-group
                                    label="Box Color"
                                    label-for="input-7"
                                >
                                    <b-form-input
                                        id="input-7"
                                        v-model="form.boxColor"
                                        type="color"
                                        required
                                    />
                                </b-form-group>
                            </b-col>
                            <b-col>
                                <b-form-group
                                    label="Box Alpha"
                                    label-for="input-8"
                                >
                                    <b-form-input
                                        id="input-8"
                                        v-model="form.boxAlpha"
                                        type="number"
                                        min="0"
                                        max="1"
                                        step="0.01"
                                    />
                                </b-form-group>
                            </b-col>
                        </b-row>
                        <b-form-group
                            label="Border Width"
                            label-for="input-9"
                        >
                            <b-form-input
                                id="input-9"
                                v-model="form.border"
                                type="number"
                                required
                                value="4"
                            />
                        </b-form-group>
                    </b-col>
                </b-row>

                <b-form-group
                    label="Overall Alpha"
                    label-for="input-10"
                >
                    <b-form-input
                        id="input-10"
                        v-model="form.overallAlpha"
                        type="text"
                        required
                        value="1"
                    />
                </b-form-group>

                <b-row>
                    <b-col class="sub-btn">
                        <b-button type="submit" class="send-btn" variant="primary">
                            Send
                        </b-button>
                    </b-col>
                    <b-col>
                        <b-alert variant="success" :show="success" dismissible @dismissed="success=false">
                            Sending success...
                        </b-alert>
                        <b-alert variant="warning" :show="failed" dismissible @dismissed="success=failed">
                            Sending failed...
                        </b-alert>
                    </b-col>
                </b-row>
            </b-form>
        </b-container>
        <b-modal
            id="create-modal"
            ref="create-modal"
            title="Create Preset"
            @ok="handleCreate"
        >
            <form ref="form" @submit.stop.prevent="createPreset">
                <b-form-group label="Name" label-for="name-input" invalid-feedback="Name is required">
                    <b-form-input id="name-input" v-model="newPresetName" required />
                </b-form-group>
            </form>
        </b-modal>
        <b-modal
            id="delete-modal"
            ref="delete-modal"
            title="Delete Preset"
            @ok="handleDelete"
        >
            <strong>Delete: "{{ selected }}"?</strong>
        </b-modal>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import Menu from '@/components/Menu.vue'

export default {
    name: 'Media',

    components: {
        Menu
    },

    middleware: 'auth',

    data () {
        return {
            form: {
                id: 0,
                name: '',
                text: '',
                x: '0',
                y: '0',
                fontSize: 24,
                fontSpacing: 4,
                fontColor: '#ffffff',
                fontAlpha: 1.0,
                showBox: true,
                boxColor: '#000000',
                boxAlpha: 0.8,
                border: 4,
                overallAlpha: 1
            },
            selected: null,
            newPresetName: '',
            presets: [],
            success: false,
            failed: false
        }
    },

    computed: {
        ...mapState('config', ['configID', 'configGui'])
    },

    watch: {
        selected (name) {
            this.getPreset(name)
        }
    },

    created () {
        this.getPreset('')
    },

    methods: {
        async getPreset (preset) {
            let req = ''

            if (preset) {
                req = `?name=${preset}`
            }
            const response = await this.$axios.get(`api/player/messenger/${req}`)

            if (response.data && !preset) {
                for (const item of response.data) {
                    this.presets.push({ value: item.name, text: item.name })
                }
            } else if (response.data) {
                this.form = {
                    id: response.data[0].id,
                    name: response.data[0].name,
                    text: response.data[0].message,
                    x: response.data[0].x,
                    y: response.data[0].y,
                    fontSize: response.data[0].font_size,
                    fontSpacing: response.data[0].font_spacing,
                    fontColor: response.data[0].font_color,
                    fontAlpha: response.data[0].font_alpha,
                    showBox: response.data[0].show_box,
                    boxColor: response.data[0].box_color,
                    boxAlpha: response.data[0].box_alpha,
                    border: response.data[0].border_width,
                    overallAlpha: response.data[0].overall_alpha
                }
            }
        },
        openDialog () {
            this.$bvModal.show('create-modal')
        },
        handleCreate (bvModalEvt) {
            // Prevent modal from closing
            bvModalEvt.preventDefault()
            // Trigger submit handler
            this.createPreset()
        },
        async createPreset () {
            const preset = {
                name: this.newPresetName,
                message: this.form.text,
                x: this.form.x,
                y: this.form.y,
                font_size: this.form.fontSize,
                font_spacing: this.form.fontSpacing,
                font_color: this.form.fontColor,
                font_alpha: this.form.fontAlpha,
                show_box: this.form.showBox,
                box_color: this.form.boxColor,
                box_alpha: this.form.boxAlpha,
                border_width: this.form.border,
                overall_alpha: this.form.overallAlpha
            }

            const response = await this.$axios.post('api/player/messenger/', preset)

            if (response.status === 201) {
                this.success = true
            } else {
                this.failed = true
            }

            this.$nextTick(() => {
                this.$bvModal.hide('create-modal')
            })
        },
        async savePreset () {
            if (this.selected) {
                const preset = {
                    id: this.form.id,
                    name: this.form.name,
                    message: this.form.text,
                    x: this.form.x,
                    y: this.form.y,
                    font_size: this.form.fontSize,
                    font_spacing: this.form.fontSpacing,
                    font_color: this.form.fontColor,
                    font_alpha: this.form.fontAlpha,
                    show_box: this.form.showBox,
                    box_color: this.form.boxColor,
                    box_alpha: this.form.boxAlpha,
                    border_width: this.form.border,
                    overall_alpha: this.form.overallAlpha
                }

                const response = await this.$axios.put(`api/player/messenger/${this.form.id}/`, preset)

                if (response.status === 200) {
                    this.success = true
                } else {
                    this.failed = true
                }
            }
        },

        deleteDialog () {
            this.$bvModal.show('delete-modal')
        },
        handleDelete (evt) {
            evt.preventDefault()
            this.deletePreset()
        },
        async deletePreset () {
            if (this.selected) {
                await this.$axios.delete(`api/player/messenger/${this.form.id}/`)
            }

            this.$bvModal.hide('delete-modal')
            this.getPreset('')
        },

        async submitMessage () {
            function aToHex (num) {
                return '0x' + Math.round(num * 255).toString(16)
            }

            const obj = {
                text: this.form.text,
                x: this.form.x,
                y: this.form.y,
                fontsize: this.form.fontSize,
                line_spacing: this.form.fontSpacing,
                fontcolor: this.form.fontColor + '@' + aToHex(this.form.fontAlpha),
                alpha: this.form.overallAlpha,
                box: (this.form.showBox) ? 1 : 0,
                boxcolor: this.form.boxColor + '@' + aToHex(this.form.boxAlpha),
                boxborderw: this.form.border
            }

            const response = await this.$axios.post('api/player/send/message/', {
                data: obj,
                channel: this.configGui[this.configID].id
            })

            if (response.data && response.data.status.Success && response.data.status.Success.split(' ')[0] === '0') {
                this.success = true
            } else {
                this.failed = true
            }
        }
    }
}
</script>

<style scoped>
.messege-container {
    margin-top: 5em;
}

.preset-div {
    width: 50%;
    margin-bottom: 2em;
}

.sub-btn {
    min-width: 90px;
    max-width: 100px;
}
</style>
