при нажатии на без текста, нужно оставить ту оценку которая выбрана и добавить Спасибо!
Ваше мнение очень важно для нас
<script setup lang="ts">
import { AnimatePresence, motion } from 'motion-v';
import { ref, watch } from 'vue';

import { useGlobalStore } from '@/app/store/globalStore.ts';
import {
  AudioSection,
  TextSection,
  VideoSection,
} from '@/feautures/Feedback/components';
import FeedbackButtonText from '@/shared/assets/icons/Feedback/FeedbackButton.svg';
import Icon1 from '@/shared/assets/icons/Feedback/Icon1.svg';
import Icon1Clear from '@/shared/assets/icons/Feedback/Icon1Clear.svg';
import Icon2 from '@/shared/assets/icons/Feedback/Icon2.svg';
import Icon2Clear from '@/shared/assets/icons/Feedback/Icon2Clear.svg';
import Icon3 from '@/shared/assets/icons/Feedback/Icon3.svg';
import Icon3Clear from '@/shared/assets/icons/Feedback/Icon3Clear.svg';
import Icon4 from '@/shared/assets/icons/Feedback/Icon4.svg';
import Icon4Clear from '@/shared/assets/icons/Feedback/Icon4Clear.svg';
import Icon5 from '@/shared/assets/icons/Feedback/Icon5.svg';
import Icon5Clear from '@/shared/assets/icons/Feedback/Icon5Clear.svg';
import IconKeyboard from '@/shared/assets/icons/Feedback/IconKeyboard.svg';
import IconLike from '@/shared/assets/icons/Feedback/IconLike.svg';
import IconMic from '@/shared/assets/icons/Feedback/IconMic.svg';
import IconVideo from '@/shared/assets/icons/Feedback/IconVideo.svg';
import { FeedbackButton, HomeButton } from '@/shared/ui/buttons';
import { WidgetType } from '@/types/widgets.ts';

const globalStore = useGlobalStore();

const selectedMessageType = ref<string | null>(null);
const selectedRating = ref<number | null>(null);
const showMessageTypes = ref(false);
const uniqueId = ref(Date.now());

const openFeedback = () => {
  uniqueId.value = Date.now();
  globalStore.openWidget(WidgetType.FEEDBACK);
};

const closeFeedback = () => {
  globalStore.closeWidget();
  selectedRating.value = null;
  showMessageTypes.value = false;
};

const selectRating = (rating: number) => {
  selectedRating.value = rating;
  showMessageTypes.value = true;
};

const selectMessageType = (type: string) => {
  selectedMessageType.value = type;
};

const MotionDiv = motion.div;
const MotionButton = motion.button;

const ratingIcons = [
  { component: Icon5, key: 'icon1', rating: 5 },
  { component: Icon4, key: 'icon2', rating: 4 },
  { component: Icon3, key: 'icon3', rating: 3 },
  { component: Icon2, key: 'icon4', rating: 2 },
  { component: Icon1, key: 'icon5', rating: 1 },
];

const ratingClearIcons = [
  { component: Icon5Clear, key: 'icon1', rating: 5 },
  { component: Icon4Clear, key: 'icon2', rating: 4 },
  { component: Icon3Clear, key: 'icon3', rating: 3 },
  { component: Icon2Clear, key: 'icon4', rating: 2 },
  { component: Icon1Clear, key: 'icon5', rating: 1 },
];

const messageTypes = [
  { id: 'text', label: 'Текстом', icon: IconKeyboard },
  { id: 'audio', label: 'Аудио', icon: IconMic },
  { id: 'no-text', label: 'Без сообщения', icon: IconLike },
  { id: 'video', label: 'Видео', icon: IconVideo },
];

watch(
  () => globalStore.isFeedbackOpen,
  (isOpen) => {
    if (isOpen) {
      selectedRating.value = null;
      uniqueId.value = Date.now();
      showMessageTypes.value = false;
      selectedMessageType.value = null;
    }
  }
);
</script>

<template>
  <MotionDiv
    class="feedback"
    :initial="{ opacity: 0 }"
    :animate="{ opacity: 1 }"
    :exit="{ opacity: 0 }"
  >
    <AnimatePresence>
      <MotionButton
        v-if="globalStore.activeWidget === WidgetType.NONE"
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
        :exit="{ opacity: 0 }"
        class="feedback__button"
        @click="openFeedback"
      >
        <FeedbackButtonText class="feedback__button-content" />
      </MotionButton>
    </AnimatePresence>
    <Transition name="fade">
      <div
        v-if="globalStore.activeWidget === WidgetType.FEEDBACK"
        class="feedback__overlay"
        @click="closeFeedback"
      >
        <div class="feedback__content" @click.stop>
          <div v-if="!showMessageTypes" class="feedback__rates">
            <AnimatePresence
              :key="globalStore.isFeedbackOpen ? 'open' : 'closed'"
            >
              <MotionDiv
                v-for="(icon, index) in ratingIcons"
                :key="icon.key"
                :layoutId="'rating-icon-' + icon.rating + '-' + uniqueId"
                :initial="{ opacity: 0, y: 100 }"
                :animate="{ opacity: 1, y: 0 }"
                :exit="{ opacity: 0, y: 50 }"
                :transition="{
                  duration: 0.15,
                  delay: index * 0.1,
                  ease: 'easeOut',
                }"
                class="feedback__rate-item"
                @click="selectRating(icon.rating)"
              >
                <component :is="icon.component" />
              </MotionDiv>
            </AnimatePresence>
          </div>

          <div
            v-if="showMessageTypes && !selectedMessageType"
            class="feedback__message-selection"
          >
            <MotionDiv
              :initial="{ opacity: 0 }"
              :animate="{ opacity: 1 }"
              :transition="{ duration: 0.3, delay: 0.2 }"
              class="feedback__message-title h2"
            >
              Выберите тип сообщения:
            </MotionDiv>

            <AnimatePresence>
              <MotionDiv
                :layoutId="'rating-icon-' + selectedRating + '-' + uniqueId"
                :initial="{ opacity: 0 }"
                :animate="{ opacity: 1 }"
                :transition="{ duration: 0.3 }"
                class="feedback__selected-icon"
              >
                <component
                  :is="
                    ratingClearIcons.find(
                      (icon) => icon.rating === selectedRating
                    )?.component
                  "
                />
              </MotionDiv>
            </AnimatePresence>

            <div class="feedback__message-buttons">
              <MotionDiv
                :initial="{ opacity: 0, scale: 0.8 }"
                :animate="{ opacity: 1, scale: 1 }"
                :transition="{ duration: 0.3, delay: 0.2, ease: 'easeOut' }"
                class="feedback__message-row feedback__message-row--first"
              >
                <FeedbackButton
                  v-for="type in messageTypes.slice(0, 2)"
                  :key="type.id"
                  color="gray"
                  class="feedback__message-button"
                  @click="selectMessageType(type.id)"
                >
                  <component :is="type.icon" class="feedback__message-icon" />
                  <p>{{ type.label }}</p>
                </FeedbackButton>
              </MotionDiv>

              <MotionDiv
                :initial="{ opacity: 0, scale: 0.8 }"
                :animate="{ opacity: 1, scale: 1 }"
                :transition="{ duration: 0.3, delay: 0.3, ease: 'easeOut' }"
                class="feedback__message-row feedback__message-row--second"
              >
                <FeedbackButton
                  v-for="type in messageTypes.slice(2)"
                  :key="type.id"
                  color="gray"
                  class="feedback__message-button"
                  @click="selectMessageType(type.id)"
                >
                  <component :is="type.icon" class="feedback__message-icon" />
                  <p>{{ type.label }}</p>
                </FeedbackButton>
              </MotionDiv>
            </div>

            <MotionDiv
              :initial="{ opacity: 0, scale: 0.8 }"
              :animate="{ opacity: 1, scale: 1 }"
              :transition="{ duration: 0.3, delay: 0.4, ease: 'easeOut' }"
              class="feedback__back-button"
            >
              <FeedbackButton color="red" @click="showMessageTypes = false">
                Вернуться
              </FeedbackButton>
            </MotionDiv>
          </div>

          <template v-if="selectedMessageType">
            <TextSection
              v-if="selectedMessageType === 'text'"
              @back="selectedMessageType = null"
            />
            <AudioSection
              v-if="selectedMessageType === 'audio'"
              @back="selectedMessageType = null"
            />
            <div
              v-if="selectedMessageType === 'no-text'"
              class="feedback__section feedback__section--no-text"
            >
              без текста
              <FeedbackButton color="red" @click="selectedMessageType = null">
                Вернуться
              </FeedbackButton>
            </div>
            <VideoSection
              v-if="selectedMessageType === 'video'"
              @back="selectedMessageType = null"
            />
          </template>

          <HomeButton :delay="0.35" />
        </div>
      </div>
    </Transition>
  </MotionDiv>
</template>

<style scoped lang="scss">
.feedback {
  &__button {
    position: fixed;
    bottom: -82px;
    right: -78px;
    width: 207px;
    height: 207px;
    border-radius: 100%;
    background: rgba(247, 51, 64, 0.8);
    color: var(--color-white);
    border: none;
    cursor: pointer;

    &-content {
      position: absolute;
      left: 10px;
      top: 12px;
    }
  }

  &__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 15px;
  }

  &__rates {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;

    svg {
      color: var(--color-white);
      cursor: pointer;
    }
  }

  &__rate-item {
    cursor: pointer;
  }

  &__message-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;
  }

  &__selected-icon {
    order: 2;

    svg {
      width: 244px;
      height: 244px;
      color: var(--color-white);
    }
  }

  &__message-title {
    order: 1;
    font-weight: 100;
    color: var(--color-white);
  }

  &__message-buttons {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  &__message-row {
    display: flex;
    justify-content: center;
    width: 100%;

    &--first {
      gap: 76px;
    }

    &--second {
      gap: 36px;
    }
  }

  &__message-button {
    min-width: 212px;
    height: 60px;
    justify-content: unset;

    p {
      border-left: 1.5px solid var(--color-white);
      padding-left: 10px;
    }
  }

  &__back-button {
    margin-top: 120px;
    order: 4;
    min-width: 201px;

    button {
      width: 100%;
    }
  }

  &__message-icon {
    width: 28px;
    height: 28px;
  }
}
</style>