<script setup lang="ts">
// types

import useCreateChatMessage from "~/composables/api/chat/useCreateChatMessage";
import { useToast } from "~/composables/global/useToast";

// state

const route = useRoute();
const id = route.params.id as string | number;

const { $queryClient: queryClient } = useNuxtApp();

const { addToast } = useToast();

const { mutateAsync: createMessage, isPending: isCreatingMessage } = useCreateChatMessage(queryClient);

const chatInputEl = ref<HTMLInputElement | null>(null);

// methods

const sendMessage = async () => {
    const value = chatInputEl.value!.value;

    if (value && value.length > 0) {
        try {
            chatInputEl.value!.value = "";

            await createMessage({
                new_message: value,
                productId: id,
            });
        } catch (e) {
            addToast({
                message: "مشکلی پیش آمده",
                options: {
                    status: "error",
                },
            });
        }
    }
};
</script>

<template>
    <div class="relative">
        <div
            id="poda"
            class="poda-rotate"
        >
            <div
                class="glow w-full"
                :class="isCreatingMessage ? '' : '!opacity-0'"
            />
            <div
                class="darkBorderBg w-full"
                :class="isCreatingMessage ? '' : '!opacity-0'"
            />
            <div
                class="darkBorderBg w-full"
                :class="isCreatingMessage ? '' : '!opacity-0'"
            />
            <div
                class="darkBorderBg w-full"
                :class="isCreatingMessage ? '' : '!opacity-0'"
            />

            <div
                class="white w-full"
                :class="isCreatingMessage ? '' : '!opacity-0'"
            />

            <form
                class="transition-all duration-200 relative flex items-center gap-4 w-full shadow-sm rounded-full h-[56px] border pe-3 ps-4"
                :class="
                    isCreatingMessage
                        ? 'border-transparent shadow-black/10 bg-white/85 backdrop-blur-xl'
                        : 'border-slate-200 shadow-transparent bg-white'
                "
            >
                <input
                    ref="chatInputEl"
                    :disabled="isCreatingMessage"
                    :placeholder="isCreatingMessage ? 'دارم فکر میکنم...' : 'سوال خود را بپرسید'"
                    type="text"
                    name="text"
                    class="focus:outline-none h-full typo-p-sm w-full border-none"
                />
                <button
                    type="submit"
                    :disabled="isCreatingMessage"
                    @click="sendMessage"
                    class="disabled:cursor-default cursor-pointer outline-none transition-all duration-350 size-[35px] shrink-0 rounded-full flex items-center justify-center"
                    :class="isCreatingMessage ? 'bg-transparent' : 'bg-black'"
                >
                    <TransitionGroup name="fade-down">
                        <Icon
                            v-if="isCreatingMessage"
                            name="ci:svg-spinners-wind-toy"
                            size="24"
                            class="text-black"
                        />
                        <Icon
                            v-else
                            name="iconamoon:send-light"
                            class="absolute rotate-180 **:stroke-white"
                        />
                    </TransitionGroup>
                </button>
            </form>
        </div>
    </div>
</template>

<style>
.white,
.darkBorderBg,
.glow {
    max-height: 70px;
    /*  max-width: 314px; */
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    z-index: -1;
    /* Border Radius */
    border-radius: 99999px;
    filter: blur(3px);
    opacity: 0.6;
    transition: opacity 0.4s;
}

#poda {
    display: flex;
    align-items: center;
    justify-content: center;
}

.white {
    max-height: 63px;
    max-width: 100%;
    border-radius: 10px;
    filter: blur(2px);
}

.white::before {
    content: "";
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(83deg);
    position: absolute;
    width: 600px;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 0 0;
    filter: brightness(1.4);
    background-image: conic-gradient(
        transparent 0%,
        #a099d8,
        transparent 8%,
        transparent 50%,
        #dfa2da,
        transparent 58%
    );
    /* animation: rotate 4s linear infinite; */
    transition: all 2s;
}

.darkBorderBg {
    max-height: 65px;
    max-width: 100%;
}

.darkBorderBg::before {
    content: "";
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(82deg);
    position: absolute;
    width: 600px;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(transparent, #998fdc, transparent 10%, transparent 50%, #cf7bba, transparent 60%);
    transition: all 2s;
}

/*
#poda:hover > .darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(262deg);
}

#poda:hover > .glow::before {
    transform: translate(-50%, -50%) rotate(240deg);
}

#poda:hover > .white::before {
    transform: translate(-50%, -50%) rotate(263deg);
}

#poda:hover > .border-input::before {
    transform: translate(-50%, -50%) rotate(250deg);
}

#poda:hover > .darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(-98deg);
}

#poda:hover > .glow::before {
    transform: translate(-50%, -50%) rotate(-120deg);
}

#poda:hover > .white::before {
    transform: translate(-50%, -50%) rotate(-97deg);
}

#poda:hover > .border-input::before {
    transform: translate(-50%, -50%) rotate(-110deg);
}
*/

.poda-rotate > .darkBorderBg::before {
    animation: rotate-dark-border-bg 2.5s 0.1s linear infinite;
}

.poda-rotate > .glow::before {
    animation: rotate-glow 2.5s 0.1s linear infinite;
}

.poda-rotate > .white::before {
    animation: rotate-white 2.5s 0.1s linear infinite;
}

/*

#poda:focus-within > .darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(442deg);
    transition: all 4s;
}

#poda:focus-within > .glow::before {
    transform: translate(-50%, -50%) rotate(420deg);
    transition: all 4s;
}

#poda:focus-within > .white::before {
    transform: translate(-50%, -50%) rotate(443deg);
    transition: all 4s;
}

#poda:focus-within > .border-input::before {
    transform: translate(-50%, -50%) rotate(430deg);
    transition: all 4s;
}
*/

.glow {
    overflow: hidden;
    filter: blur(30px);
    opacity: 0.4;
    max-height: 130px;
    max-width: 354px;
}

.glow:before {
    content: "";
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(60deg);
    position: absolute;
    width: 999px;
    height: 999px;
    background-repeat: no-repeat;
    background-position: 0 0;
    /*border color, change middle color*/
    background-image: conic-gradient(
        transparent,
        #998fdc 5%,
        transparent 38%,
        transparent 50%,
        #cf7bba 60%,
        transparent 87%
    );
    /* change speed here */
    /* animation: rotate 4s 0.3s linear infinite; */
    transition: all 2s;
}

@keyframes rotate-dark-border-bg {
    100% {
        transform: translate(-50%, -50%) rotate(442deg);
    }
}

@keyframes rotate-glow {
    100% {
        transform: translate(-50%, -50%) rotate(420deg);
    }
}

@keyframes rotate-white {
    100% {
        transform: translate(-50%, -50%) rotate(443deg);
    }
}
</style>
