<template>
    <section v-if="chat" class="flex flex-col flex-1 gap-4">
        <Status :chat="chat" :is="is" />
        <Card>
            <div class="flex flex-col flex-1 gap-5">
                <Header
                    :loading="form.processing"
                    @createZoomMeeting="createZoomMeeting"
                    :sender="sender"
                    :chat="chat"
                    :is="is"
                />
                <hr />
                <div
                    class="flex flex-col h-full mb-4 overflow-y-auto max-h-[490px] min-h-[490px]"
                    ref="messages"
                >
                    <div class="flex flex-col h-full">
                        <div
                            v-if="chat.messages.length > 0"
                            class="grid grid-cols-12 gap-y-5 scroll-smooth"
                        >
                            <template
                                v-for="(message, index) in chat.messages"
                                :key="index"
                            >
                                <Message
                                    :message="message"
                                    :sender="sender"
                                    :user="current"
                                />
                            </template>
                        </div>
                        <div
                            v-else
                            class="flex items-center justify-center w-full py-10"
                        >
                            <div
                                class="flex flex-col items-center justify-center w-full gap-5"
                            >
                                <svg
                                    width="166"
                                    height="150"
                                    viewBox="0 0 166 150"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        opacity="0.2"
                                        d="M4.23242 11.0342C4.23242 5.51134 8.70958 1.03418 14.2324 1.03418H130.709C136.232 1.03418 140.709 5.51133 140.709 11.0342V121.15C140.709 126.673 136.232 131.15 130.709 131.15H14.2324C8.70958 131.15 4.23242 126.673 4.23242 121.15V11.0342Z"
                                        fill="#50CD89"
                                    />
                                    <path
                                        d="M123.657 25V50.0403C123.657 51.7006 124.317 53.2929 125.491 54.4669C126.665 55.6408 128.257 56.3004 129.917 56.3004H154.958"
                                        stroke="#50CD89"
                                        stroke-width="10.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M67.3164 87.6008V37.5202C67.3164 34.1996 68.6355 31.0151 70.9834 28.6671C73.3314 26.3191 76.516 25 79.8365 25H123.657L154.957 56.3004V125.161C154.957 128.482 153.638 131.666 151.29 134.014C148.942 136.362 145.758 137.681 142.437 137.681H108.007M48.5361 125.161H92.3567M92.3567 125.161L73.5764 106.381M92.3567 125.161L73.5764 143.941"
                                        stroke="#50CD89"
                                        stroke-width="10.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </svg>

                                <p class="text-xs text-center text-gray-200">
                                    No messages show here.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <hr />
                <div
                    class="flex flex-col items-center w-full gap-2.5 bg-blue-100 p-2 rounded-xl"
                >
                    <div class="flex-grow w-full">
                        <div class="relative w-full">
                            <textarea
                                @keydown.enter="send"
                                :disabled="form.processing"
                                ref="message"
                                v-model="form.message.text"
                                placeholder="Type a message"
                                type=""
                                class="flex w-full h-10 pr-10 text-sm text-gray-300 bg-blue-100 border border-none rounded-lg disbaled:opacity-75 disabled:cursor-not-allowed focus:outline-none focus:border-none focus:ring-transparent"
                            ></textarea>
                            <div
                                class="absolute right-0 flex flex-col-reverse items-end gap-2 -translate-y-3 pointer-events-none max-h-6 top-1/2"
                            >
                                <button
                                    @click="toggle"
                                    class="flex items-center justify-center w-12 h-full text-gray-200 pointer-events-auto hover:text-gray-300"
                                >
                                    <svg
                                        class="w-6 h-6"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                        ></path>
                                    </svg>
                                </button>
                                <EmojiPicker
                                    class="pointer-events-auto"
                                    ref="emojiPicker"
                                    v-show="showEmoji"
                                    :native="false"
                                    @select="append"
                                />
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between w-full">
                        <!-- <File
                            type="file"
                            name="attachment"
                            id="attachment"
                            class="hidden"
                            :value="form.message.attachment"
                            v-on:change="form.message.attachment"
                            accept=".pdf, .doc, .docx, image/*"
                        /> -->
                        <span>
                            <File
                                v-model:value="form.message.attachment"
                                :maxFiles="1"
                                accept=".pdf, .doc, .docx, image/*"
                                name="chat_attachment"
                            >
                                <template #noFiles>
                                    <span
                                        class="flex items-center justify-center p-2 text-gray-200 bg-blue-200 rounded-full cursor-pointer hover:text-gray-300"
                                    >
                                        <svg
                                            class="w-5 h-5"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
                                            ></path>
                                        </svg>
                                    </span>
                                </template>
                            </File>
                        </span>

                        <Button
                            :disabled="
                                form.processing ||
                                (!form.message.text && !form.message.attachment)
                            "
                            :loading="form.processing"
                            size="md"
                            @click="send"
                        >
                            Send
                        </Button>
                    </div>
                </div>
            </div>
        </Card>
    </section>
    <section v-else class="flex flex-col flex-1 gap-4">
        <Card>
            <div class="flex items-center justify-center py-10">
                <div
                    class="max-w-[290px] w-full flex flex-col items-center justify-center gap-5"
                >
                    <svg
                        width="166"
                        height="151"
                        viewBox="0 0 166 151"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            opacity="0.2"
                            d="M4.23242 11.5342C4.23242 6.01134 8.70958 1.53418 14.2324 1.53418H130.709C136.232 1.53418 140.709 6.01133 140.709 11.5342V121.65C140.709 127.173 136.232 131.65 130.709 131.65H14.2324C8.70958 131.65 4.23242 127.173 4.23242 121.65V11.5342Z"
                            fill="#50CD89"
                        />
                        <path
                            d="M81.1408 79.5726C94.407 79.5726 105.161 68.8182 105.161 55.5519C105.161 42.2857 94.407 31.5312 81.1408 31.5312C67.8745 31.5312 57.1201 42.2857 57.1201 55.5519C57.1201 68.8182 67.8745 79.5726 81.1408 79.5726Z"
                            stroke="#50CD89"
                            stroke-width="10.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M45.1099 139.625V127.614C45.1099 121.244 47.6406 115.134 52.1454 110.629C56.6501 106.124 62.7599 103.594 69.1305 103.594H93.1512C99.5219 103.594 105.632 106.124 110.136 110.629C114.641 115.134 117.172 121.244 117.172 127.614V139.625"
                            stroke="#50CD89"
                            stroke-width="10.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M141.192 61.5566V97.5877M123.177 79.5721H159.208H123.177Z"
                            stroke="#50CD89"
                            stroke-width="10.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </svg>

                    <p class="text-xs text-center text-gray-200">
                        {{ $t("Register.no_chats") }}
                    </p>
                </div>
            </div>
        </Card>
    </section>
</template>

<script>
import Message from "./Message.vue";
import Button from "@/Jetstream/Button.vue";
import EmojiPicker from "vue3-emoji-picker";
import Header from "./Header.vue";
import Status from "./Status.vue";
import Card from "@/components/Containers/ContentCard.vue";
import { useForm } from "@inertiajs/inertia-vue3";
import File from "@/components/Inputs/FileUploads/FileModded.vue";
export default {
    data() {
        return {
            message: "",
            showEmoji: false,
            form: useForm({
                message: {
                    text: "",
                    attachment: null,
                },
                chat_id: this.chat?.id,
                is: this.is,
            }),
        };
    },
    components: {
        Message,
        Button,
        EmojiPicker,
        Header,
        Card,
        Status,
        File,
    },
    methods: {
        append(emoji) {
            this.form.message.text += emoji.i;
            this.$refs.message?.focus();
        },
        toggle() {
            // hack to force re-render
            setTimeout(() => {
                this.showEmoji = !this.showEmoji;
            }, 0);
        },
        scrollToBottom() {
            if (this.$refs.messages)
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.$refs.messages.scrollTop =
                            this.$refs.messages?.scrollHeight + 50000;
                    }, 200);
                });
        },
        resetForm() {
            if (this.chat) {
                this.form = useForm({
                    message: {
                        text: "",
                        attachment: null,
                    },
                    chat_id: this.chat?.id,
                    is: this.is,
                });
                this.$refs.message?.focus();
            }
        },
        send(event) {
            // check if shift + enter is pressed
            this.form.message.text = this.form.message.text.trim();
            if (this.form.message.text.length == 0) this.form.message.text = "";
            if (
                event.shiftKey ||
                (!this.form.message.text && !this.form.message.attachment)
            ) {
                return;
            }
            this.form.post(route("chat.send-message"), {
                preserveScroll: true,
                onSuccess: () => {
                    this.resetForm();
                },
                onFinish: () => {
                    this.scrollToBottom();
                },
            });
        },
        createZoomMeeting() {
            this.form.post(route("chat.start-zoom-meeting"), {
                preserveScroll: true,
                onSuccess: () => {
                    this.resetForm();
                },
                onFinish: () => {
                    this.scrollToBottom();
                },
            });
        },
    },
    mounted() {
        this.scrollToBottom();
        // on click outside of emoji picker, hide it
        document.addEventListener("click", (e) => {
            if (
                !this.$refs.emojiPicker?.$el?.contains(e.target) &&
                this.showEmoji
            ) {
                this.showEmoji = false;
            }
        });
    },

    props: {
        chat: {
            type: Object,
            required: true,
        },
        is: {
            type: String,
            required: true,
        },
    },
    computed: {
        current: function () {
            if (this.is == "user") {
                return this.chat?.user;
            } else {
                return this.chat?.worker;
            }
        },
        sender: function () {
            if (this.is == "user") {
                return this.chat?.worker;
            } else {
                return this.chat?.user;
            }
        },
    },
    watch: {
        chat: {
            handler: function () {
                if (this.chat) {
                    this.form = useForm({
                        message: {
                            text: "",
                            attachment: null,
                        },
                        chat_id: this.chat?.id,
                        is: this.is,
                    });
                }
                this.scrollToBottom();
            },
            deep: true,
        },
    },
};
</script>

<style>
.v3-body-inner {
    scroll-behavior: smooth;
    scrollbar-color: #393d3f rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
}
.v3-body-inner::-webkit-scrollbar {
    width: 8px;
}
.v3-body-inner::-webkit-scrollbar-track {
    background-color: transparent;
}
.v3-body-inner::-webkit-scrollbar-thumb {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}
.v3-body-inner:hover::-webkit-scrollbar-thumb {
    display: block;
}
.v3-emoji-picker {
    height: 320px;
    width: 280px;
    background: white;
    color: #000;
    box-shadow: 0 2px 10px #0003;
    border-radius: 10px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.v3-emoji-picker * {
    box-sizing: border-box;
}
.v3-emoji-picker .v3-header {
    padding: 15px 15px 13px;
    border-bottom: 1px solid #ddd;
}
.v3-emoji-picker .v3-header .v3-groups {
    display: flex;
}
.v3-emoji-picker .v3-header .v3-groups .v3-group {
    flex-grow: 1;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font-size: 23px;
    cursor: pointer;
    position: relative;
    display: block;
    opacity: 0.7;
    transition: 0.2s;
}
.v3-emoji-picker .v3-header .v3-groups .v3-group.v3-is-hidden {
    display: none;
}
.v3-emoji-picker .v3-header .v3-groups .v3-group:first-child,
.v3-emoji-picker .v3-header .v3-groups .v3-group:last-child {
    flex-grow: 0;
}
.v3-emoji-picker .v3-header .v3-groups .v3-group:hover {
    opacity: 1;
}
.v3-emoji-picker .v3-header .v3-groups .v3-group span {
    display: flex;
    align-items: center;
    justify-content: center;
}
.v3-emoji-picker .v3-header .v3-groups .v3-group span img {
    display: block;
    width: 1em;
    height: auto;
}
.v3-emoji-picker .v3-spacing {
    height: 11px;
}
.v3-emoji-picker .v3-search input {
    width: 100%;
    display: block;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    transition: 0.2s;
}
.v3-emoji-picker .v3-search input:focus {
    outline: none;
    border-color: #000;
}
.v3-emoji-picker .v3-body {
    padding: 0 0 15px 11px;
    min-height: 0;
    flex-grow: 1;
}
.v3-emoji-picker .v3-body .v3-body-inner {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding-right: 11px;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5 {
    margin: 0;
    top: 0;
    background: white;
    padding: 7px 0 3px 4px;
    z-index: 2;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5.v3-sticky {
    position: sticky;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis {
    display: flex;
    font-size: 18px;
    flex-wrap: wrap;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button {
    cursor: pointer;
    border: none;
    background: none;
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 12.5%;
    max-width: 12.5%;
    flex-grow: 1;
    padding: 0;
    font-size: 22px;
    position: relative;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button:after {
    content: "";
    width: 100%;
    padding-bottom: 100%;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button span {
    display: flex;
    align-items: center;
    justify-content: center;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button img {
    max-width: 100%;
    padding: 4px;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button span,
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button:hover {
    background: #f7f7f7;
}
.v3-emoji-picker .v3-body .v3-body-inner.is-mac .v3-emojis button {
    font-family: "Apple Color Emoji";
}
.v3-emoji-picker .v3-footer {
    font-size: 14px;
    border-top: 1px solid #dddddd;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.v3-emoji-picker .v3-footer .v3-tone,
.v3-emoji-picker .v3-footer .v3-foot-left {
    display: flex;
    align-items: center;
}
.v3-emoji-picker .v3-footer .v3-tone img,
.v3-emoji-picker .v3-footer .v3-foot-left img {
    width: 20px;
    display: block;
}
.v3-emoji-picker .v3-footer .v3-tone > span:first-child,
.v3-emoji-picker .v3-footer .v3-foot-left > span:first-child {
    margin-right: 6px;
}
.v3-emoji-picker .v3-footer .v3-foot-left > span.v3-text {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v3-emoji-picker .v3-footer .v3-tone {
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.v3-emoji-picker .v3-footer .v3-tone > span {
    display: inline-flex;
    vertical-align: top;
}
.v3-emoji-picker .v3-footer .v3-tone .v3-text {
    font-size: 13px;
}
.v3-emoji-picker .v3-footer .v3-tone .v3-icon {
    display: inline-flex;
    height: 15px;
    width: 15px;
    vertical-align: middle;
    align-self: center;
    border: 2px solid rgba(0, 0, 0, 0.2);
}
.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-neutral {
    background-color: #ffd225;
}
.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fb {
    background-color: #ffdfbd;
}
.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fc {
    background-color: #e9c197;
}
.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fd {
    background-color: #c88e62;
}
.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fe {
    background-color: #a86637;
}
.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3ff {
    background-color: #60463a;
}
.v3-emoji-picker .v3-footer .v3-tone .is-mac span {
    font-family: "Apple Color Emoji";
}
.v3-skin-tones {
    position: absolute;
    background: white;
    height: 100%;
    width: 60%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 15px;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    border-radius: 0 0 10px 10px;
}
.v3-skin-tones.v3-is-open {
    opacity: 1;
    visibility: visible;
}
.v3-skin-tones .v3-skin-tone {
    display: inline-block;
    height: 15px;
    width: 25px;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: 0ms;
}
.v3-skin-tones .v3-skin-tone:hover {
    transform: scale(1.1);
    transition: 0.2s;
}
.v3-skin-tones .v3-skin-tone-neutral {
    color: #ffd225;
    background-color: #ffd225;
}
.v3-skin-tones .v3-skin-tone-1f3fb {
    color: #ffdfbd;
    background-color: #ffdfbd;
}
.v3-skin-tones .v3-skin-tone-1f3fc {
    color: #e9c197;
    background-color: #e9c197;
}
.v3-skin-tones .v3-skin-tone-1f3fd {
    color: #c88e62;
    background-color: #c88e62;
}
.v3-skin-tones .v3-skin-tone-1f3fe {
    color: #a86637;
    background-color: #a86637;
}
.v3-skin-tones .v3-skin-tone-1f3ff {
    color: #60463a;
    background-color: #60463a;
}
.v3-input-emoji-picker * {
    box-sizing: border-box;
}
.v3-input-emoji-picker .v3-input-picker-root {
    position: relative;
}
.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-input,
.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea {
    width: 100%;
    height: 40px;
    border: 1px solid #999;
    padding-left: 15px;
}
.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea {
    min-height: 80px;
    resize: vertical;
}
.v3-input-emoji-picker
    .v3-input-picker-root
    .v3-emoji-picker-textarea
    + .v3-input-picker-wrap
    .v3-input-picker-icon {
    top: auto;
    bottom: 5px;
}
.v3-input-emoji-picker
    .v3-input-picker-root
    .v3-input-picker-wrap
    .v3-input-picker-icon {
    display: inline-flex;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    border: none;
    background: none;
    padding: 0 5px;
    cursor: pointer;
}
.v3-input-emoji-picker
    .v3-input-picker-root
    .v3-input-picker-wrap
    .v3-input-picker-icon
    img {
    display: block;
    width: 1em;
    height: 1em;
}
.v3-input-emoji-picker
    .v3-input-picker-root
    .v3-input-picker-wrap
    .v3-emoji-picker {
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}
.v3-input-emoji-picker
    .v3-input-picker-root
    .v3-input-picker-wrap.v3-picker-is-open
    .v3-emoji-picker {
    opacity: 1;
    visibility: visible;
    z-index: 999;
}
</style>
