<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script>
    import sanitizeHtml from 'sanitize-html';
    import EmojiPicker from 'vue-emoji-picker';
    import {addMessage, editMessage} from "../../../domains/chat-message/api";

    export default {
        components: {
            EmojiPicker
        },
        name: 'ChatRoomForm',
        props: {
            roomConnected: Boolean,
            room: Object,
            messageEditContent: String | undefined,
            messageEditId: Number | undefined
        },
        created() {
            if(typeof this.messageEditContent === 'string') {
                this.form.content = this.messageEditContent;
            }
        },
        mounted() {
            this.$refs['content-input'].focus();
        },
        watch: {
            messageEditContent(newVal) {
                this.form.content = newVal;
            }
        },
        data() {
            return {
                form: {
                    content: ''
                },
                sending: false,

                emojiSearch: ''
            }
        },
        methods: {
            async send() {
                if(this.sending || !this.roomConnected) return;

                let form = {
                    roomId: this.room.id,
                    content: this.form.content,
                    encrypted: false
                };

                if(!!this.room.encryption) {
                    try {
                        // clean html of message, before encrypt it,
                        // can't strip it server side.
                        form.content = await this.$chat.encodeMessage(this.room.id, sanitizeHtml(form.content, {
                            allowedTags: [],
                            allowedAttributes: {}
                        }));

                        form.encrypted = true;
                    } catch (e) {
                        form.encrypted = false;
                    }
                }

                this.sending = true;

                try {
                    let result;

                    if(typeof this.messageEditId === 'undefined') {
                        result = await addMessage(form);

                        this.$emit('added', result);
                    } else {
                        result = await editMessage(this.messageEditId, form);

                        this.$emit('edited', result);
                    }

                    this.form.content = '';
                    this.sending = false;
                } catch (e) {
                    this.$emit('error', e.message);
                    console.log(e);
                    this.sending = false;
                }

            },
            appendEmoji(emoji) {
                this.form.content += emoji;
            },
            cancelEdit() {
                this.form.content = '';

                this.$emit('editCancel');
            },

            handleInputEvent($event) {
                console.log($event);
            }
        },
        directives: {
            focus: {
                inserted(el) {
                    el.focus()
                },
            },
        },
    }
</script>
<template>
    <div>
        <form @submit.prevent="send">
            <div class="input-group">
                <div v-if="messageEditId" class="input-group-prepend input-group-sm" style="height: auto">
                    <button type="button" class="btn btn-secondary btn-xs" :disabled="sending" @click.prevent="cancelEdit">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <input ref="content-input" @keyup="handleInputEvent" type="text" v-model="form.content" class="form-control form-control-sm" placeholder="Schreibe eine Nachricht..." />

                <emoji-picker @emoji="appendEmoji" :search="emojiSearch">
                    <div
                        class="emoji-invoker"
                        slot="emoji-invoker"
                        slot-scope="{ events: { click: clickEvent } }"
                        @click.stop="clickEvent"
                    >
                        <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 0h24v24H0z" fill="none"/>
                            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
                        </svg>
                    </div>
                    <div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
                        <div class="emoji-picker" :style="{ top: '-320px', right: '0px' }">
                            <div class="form-group mb-1">
                                <input type="text" class="form-control form-control-sm" placeholder="Emoji..." v-model="emojiSearch" v-focus />
                            </div>
                            <div>
                                <div v-for="(emojiGroup, category) in emojis" :key="category">
                                    <h5>{{ category }}</h5>
                                    <div class="emojis">
                                                <span
                                                    v-for="(emoji, emojiName) in emojiGroup"
                                                    :key="emojiName"
                                                    @click="insert(emoji)"
                                                    :title="emojiName"
                                                >{{ emoji }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </emoji-picker>
                <div class="input-group-append input-group-sm" style="height: auto">
                    <button type="submit" class="btn btn-dark btn-xs" :disabled="sending || !roomConnected" @click.prevent="send">
                        <i class="fa" :class="{'fa-arrow-right': !messageEditId, 'fa-save': messageEditId}"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
</template>
<style>
    input[type=text].form-control:focus {
        border: 1px solid #ced4da;
        box-shadow: none;
    }

    .emoji-invoker {
        position: absolute;
        top: 0.2rem;
        right: 2rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s;
    }

    .emoji-invoker:hover {
        transform: scale(1.1);
    }
    .emoji-invoker > svg {
        fill: #b1c6d0;
    }

    .emoji-picker {
        position: absolute;
        z-index: 1;
        border: 1px solid #ccc;
        width: 15rem;
        height: 20rem;
        overflow: scroll;
        padding: 1rem;
        box-sizing: border-box;
        border-radius: 0.5rem;
        background: #fff;
        box-shadow: 1px 1px 8px #c7dbe6;
    }

    .emoji-picker h5 {
        margin: 12px 0 6px;
        color: #b1b1b1;
        text-transform: uppercase;
        font-size: .75rem;
        cursor: default;
    }
    .emoji-picker .emojis {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .emoji-picker .emojis:after {
        content: "";
        flex: auto;
    }
    .emoji-picker .emojis span {
        padding: 0.2rem;
        cursor: pointer;
        border-radius: 5px;
    }
    .emoji-picker .emojis span:hover {
        background: #ececec;
        cursor: pointer;
    }
</style>
