Messenger. Технический обзор клиента (Vue.js)

import { boot } from 'quasar/wrappers';
import axios, { AxiosInstance } from 'axios';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
    $api: AxiosInstance;
  }
}

const api = axios.create({
  withCredentials: true,
  baseURL: import.meta.env.VITE_API_URL + '/api',
});

api.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${localStorage.getItem(
    'accessToken'
  )}`;
  return config;
});

api.interceptors.response.use(
  (config) => {
    return config;
  },
  async (error) => {
    const originalRequest = error.config;
    if (
      error.response?.status == 401 &&
      error.config &&
      !error.config._isRetry
    ) {
      originalRequest._isRetry = true;
      try {
        const sessionId = localStorage.getItem('sessionId');
        const response = await axios.post(
          `${import.meta.env.VITE_API_URL}/api/refresh`,
          { sessionId, withCredentials: true }
        );
        localStorage.setItem('accessToken', response.data.accessToken);
        return api.request(originalRequest);
      } catch (e) {
        console.log('Not Authorized');
      }
    }
    throw error;
  }
);

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios;
  app.config.globalProperties.$api = api;
});

export { api };

import { api } from '../boot/axios';
import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
import { ApiResponse, ServerErrorResponse, ApiData } from './api.interfaces';
import { Notify, Loading, QSpinnerCube } from 'quasar';

export function axiosError(e: unknown) {
  if (e instanceof AxiosError) {
    const error = e;
    if (error.response) {
      const errorData = error.response.data as ServerErrorResponse;
      if (errorData && 'message' in errorData) {
        if (Array.isArray(errorData.message)) {
          errorData.message = errorData.message.join(', ');
        }
        return {
          status: error.response.status ?? 500,
          message: errorData.message,
        };
      }

      const errorDataArray = error.response.data as {
        validationErrors: [];
      };
      if (errorDataArray && 'validationErrors' in errorDataArray) {
        return {
          status: error.response.status ?? 500,
          message: 'Ошибка валидации',
        };
      }
    }

    if (error.code === 'ECONNABORTED' || error.message === 'Network Error') {
      return {
        status: 0,
        message: 'Ошибка соединения с сервером',
      };
    }
  } else {
    // Обработка ошибок, не являющихся AxiosError
    console.error(e);
  }

  return {
    status: 0,
    message: 'Неизвестная ошибка',
  };
}

export async function sendApiRequest<T>(
  method: 'get' | 'post' | 'put' | 'delete',
  url: string,
  config: AxiosRequestConfig = {}
): Promise<ApiResponse<T>> {
  try {
    const response: AxiosResponse<T> = await api.request<T>({
      url,
      method,
      ...config,
    });
    return {
      status: response.status,
      response: response.data,
    };
  } catch (error) {
    return axiosError(error);
  }
}

export default class MessengerApi {
  static async roomCreate(
    type: number,
    name: string,
    privacy: number,
    about: string
  ): Promise<ApiResponse<RoomCreate>> {
    return sendApiRequest<RoomCreate>('post', '/room/create', {
      data: {
        type,
        name,
        privacy,
        about,
      },
    });
  }

  static async editAvatar(
    roomId: number,
    imageBlob: Blob,
    cropWidth: number,
    cropHeight: number,
    cropLeft: number,
    cropTop: number
  ): Promise<ApiResponse<EditAvatar>> {
    const formData = new FormData();
    formData.append('roomId', roomId.toString());
    formData.append('image', imageBlob);
    formData.append('cropWidth', cropWidth.toString());
    formData.append('cropHeight', cropHeight.toString());
    formData.append('cropLeft', cropLeft.toString());
    formData.append('cropTop', cropTop.toString());

    return sendApiRequest<EditAvatar>('post', '/room/avatar', {
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
  }

  static async dialogueCreate(
    to: number
  ): Promise<ApiResponse<DialogueCreate>> {
    return sendApiRequest<DialogueCreate>('post', '/room/createDialogue', {
      params: {
        to,
      },
    });
  }

  static async roomGet(idMixed: string): Promise<ApiResponse<Room>> {
    return sendApiRequest<Room>('get', '/room', {
      params: {
        id: idMixed,
      },
    });
  }

actions: {
    async roomCreate(
      type: number,
      name: string,
      privacy: number,
      about: string
    ): Promise<RoomCreate | boolean | { error: string; code: number }> {
      return await setResponse({
        func: MessengerApi.roomCreate,
        args: [type, name, privacy, about],
      });
    },

    async roomGet(
      idMixed: string
    ): Promise<Room | boolean | { error: string; code: number }> {
      return await setResponse({
        func: MessengerApi.roomGet,
        args: [idMixed],
      });
    },
    
    async editAvatar(
      roomId: number,
      imageBlob: Blob,
      cropWidth: number,
      cropHeight: number,
      cropLeft: number,
      cropTop: number
    ): Promise<EditAvatar | boolean | { error: string; code: number }> {
      return await setResponse({
        func: MessengerApi.editAvatar,
        args: [roomId, imageBlob, cropWidth, cropHeight, cropLeft, cropTop],
      });
    },

import { io, Socket } from 'socket.io-client';

const sessionId = localStorage.getItem('sessionId');

export interface Msg {
  msgId: number;
  roomId: number;
  name: string;
  userId: number;
  avatar: string;
  date: string;
  type: number;
  content: string;
  replyTo: number;
}

export interface Online {
  userId: number;
  online: boolean;
  timestamp: number;
  counter: number;
}

export interface Typing {
  userId: number;
  userName: string;
  typing: boolean;
  timestamp: number;
  roomId: number;
}

export interface Exception {
  status: string;
  message: string;
}

export default class SocketService {
  socket = {} as Socket;

  constructor() {
    this.connectToSocket();
  }

  connectToSocket() {
    const timerSocketConnect = setInterval(async () => {
      const accessToken = localStorage.getItem('accessToken');
      if (accessToken !== null) {
        this.socket = io(import.meta.env.VITE_API_URL, {
          withCredentials: true,
          extraHeaders: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
        clearInterval(timerSocketConnect);
      }
    }, 3000);
  }

  disconnectFromSocket() {
    if (this.socket) {
      this.socket.disconnect();
    }
  }

  emit(event: string, data: { sessionId?: string | null }) {
    data.sessionId = sessionId;
    return new Promise((resolve, reject) => {
      if (!this.socket) {
        reject('No socket connection');
      } else {
        this.socket.emit(
          event,
          data,
          (response: { data: object; error: string }) => {
            if (response?.data) {
              resolve(response);
            } else {
              console.error(
                'Error on emit: ' + event + 'Server respose: ' + response //?.error
              );
              reject(response);
            }
          }
        );
      }
    });
  }

  async joinUserToAllRooms(userId: number) {
    return await this.emit('joinUserToAllRooms', { userId });
  }

  async joinToUserRoom(userId: number) {
    return await this.emit('joinToUserRoom', { userId });
  }

  async joinToRoom(roomId: number) {
    return await this.emit('joinToRoom', { roomId });
  }

  async leaveRoom(roomId: number) {
    return await this.emit('leaveRoom', { roomId });
  }

  async callUser(counter = 1) {
    return await this.emit('callUser', { counter });
  }

  async userOffline() {
    return await this.emit('userOffline', {});
  }

  async createMessage(message: object) {
    return await this.emit('createMessage', message);
  }

  async typing(roomId: string) {
    return await this.emit('typing', { roomId });
  }

  async subscribeRoom(roomId: number) {
    return await this.emit('subscribeRoom', { roomId });
  }

  async banUser(userId: number, roomId: number, banned: boolean) {
    return await this.emit('banUser', { userId, roomId, banned });
  }

  onUserOnlineStatus(action: (online: Online) => void) {
    this.socket.on('userOnlineStatus', action);
  }

  onSendMessage(action: (msg: Msg) => void) {
    this.socket.on('sendMessage', action);
  }

  onTyping(action: (typing: Typing) => void) {
    this.socket.on('broadcastTyping', action);
  }

  onException(action: (exception: Exception) => void) {
    this.socket.on('exception', action);
  }

  onConnect(action: () => void) {
    this.socket.on('connect', action);
  }

  onDisconnect(action: () => void) {
    this.socket.on('disconnect', action);
  }
}

<template>
  <router-view />
  <div class="modal-wrapper">
    <transition name="toggleBB">
      <div v-if="showMessage" class="modal modal-message">
        <div class="message" @click="onMessage">
          <div class="truncate-text">
            {{ messageLabel }}
          </div>
        </div>
      </div>
    </transition>

    <transition name="toggleBB">
      <div v-if="showAlert" class="modal modal-error">
        <div class="message">
          <div class="truncate-text">
            {{ alertLabel }}
          </div>
        </div>
      </div>
    </transition>
  </div>

  <div v-if="appStore.srvErrorOverlay" class="srvErrorOverlay">
    <div>
      <div>Что-то пошло не так...</div>
      <button @click="reloadPage">Обновить</button>
    </div>
  </div>

  <div v-if="appStore.loadingOverlay" class="loadingOverlay">
    <qq-spinner />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useAppStore } from './stores/app.store';
import { useUserStore } from '../user/user.store';
import QqSpinner from './QqSpinner.vue';
import SocketService from './socket.service';

export default defineComponent({
  name: 'App',
  components: { QqSpinner },
  data() {
    return {
      showAlert: false,
      showMessage: false,
      alertLabel: '',
      messageLabel: '',
      alertTimeout: {} as NodeJS.Timeout,
      msgTimeout: {} as NodeJS.Timeout,
    };
  },
  setup() {
    const appStore = useAppStore();
    const userStore = useUserStore();
    const socketService = new SocketService();
    appStore.socketService = socketService;
    return { appStore, userStore, socketService };
  },
  async mounted() {
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') {
        this.socketService.callUser();
      } else {
        this.socketService.userOffline();
      }
    });

    setInterval(() => {
      this.appStore.isSocketConnected = this.socketService.socket.connected;
    }, 2000);

    setTimeout(() => {
      this.initEvents();
      this.joinUserToAllRooms();
    }, 3000);
  },
  methods: {
    joinUserToAllRooms() {
      let timerJoinToAllRooms = setInterval(async () => {
        const accessToken = localStorage.getItem('accessToken');
        if (accessToken !== null) {
          await this.socketService.joinUserToAllRooms(this.userStore.userId);
          clearInterval(timerJoinToAllRooms);
        }
      }, 3000);
    },
    onMessage() {
      this.showAlert = true;
    },
    reloadPage() {
      location.reload();
    },
    initEvents() {
      this.socketService.onConnect(() => {
        this.appStore.isSocketConnected = true;
        console.log('CONNECTED');
        this.joinUserToAllRooms();
      });

      this.socketService.onDisconnect(() => {
        this.appStore.isSocketConnected = false;
        console.error('DISCONNECTED');
      });

      this.socketService.onException((exception) => {
        const error = exception.message;
        this.appStore.setAlertMsg(error);
        console.error(error);
      });

      this.socketService.onUserOnlineStatus((data) => {
        if (data?.userId) {
          this.appStore.userOnline = data;

          if (data.counter <= 1) {
            if (document.visibilityState === 'visible') {
              this.socketService.callUser(data.counter + 1);
            } else {
            }
          }
        }
      });

      this.socketService.onSendMessage((data) => {
        const message = {
          msgId: data.msgId,
          roomId: data.roomId,
          name: data.name,
          userId: data.userId,
          avatar: data.avatar,
          date: data.date,
          type: data.type,
          content: data.content,
          replyTo: data.replyTo,
        };

        this.appStore.lastMessage = message;
      });

      this.socketService.onTyping((data) => {
        const typing = {
          userId: data.userId,
          userName: data.userName,
          typing: data.typing,
          timestamp: data.timestamp,
          roomId: data.roomId,
        };

        this.appStore.typing = typing;
      });
    },
  },
  computed: {
    alertMessage() {
      return this.appStore.alertMessage.timestamp;
    },
    messageAlert() {
      return this.appStore.lastMessage.date;
    },
  },
  watch: {
    alertMessage() {
      clearTimeout(this.alertTimeout);
      this.showAlert = true;
      this.alertLabel = this.appStore.alertMessage.message;
      this.alertTimeout = setTimeout(() => {
        this.showAlert = false;
      }, 3000);
    },
    messageAlert() {
      if (
        this.appStore.activeRoom !== this.appStore.lastMessage.roomId &&
        this.appStore.lastMessage.userId !== this.userStore.userId
      ) {
        clearTimeout(this.msgTimeout);
        this.showMessage = true;

        switch (this.appStore.lastMessage.type) {
          case 1:
            this.messageLabel =
              this.appStore.lastMessage.name +
              ': ' +
              this.appStore.lastMessage.content;
            break;
          default:
            this.messageLabel = this.appStore.lastMessage.name + ': ...';
        }

        this.msgTimeout = setTimeout(() => {
          this.showMessage = false;
        }, 3000);
      }
    },
  },
});
</script>

<style>
body {
  background-size: cover;
  background-color: #ffffff;
  background-image: url('tr.jpg');
  font-family: Roboto, -apple-system, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  box-sizing: border-box;
  font-size: 14px;
  direction: ltr;
  unicode-bidi: isolate;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  line-height: 21px;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: black;
}

/* Remove outline on the forms and links */
:active,
:hover,
:focus {
  outline: 0;
  outline-offset: 0;
}

.app-header {
  flex: 0 0 auto;
  padding: 0 5px;
  background: #272727;
  color: white;
  text-align: center;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 10000;
}
</style>

<style scoped>
.modal-wrapper {
  display: block;
}

.modal {
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  z-index: 9500;
  margin-left: 30px;
  margin-right: 30px;
  user-select: none;
  height: 30px;
}

.modal-error {
  margin-bottom: 70px;
  bottom: 0px;
}

.modal-message {
  margin-top: 80px;
  top: 0px;
  cursor: pointer;
}

.message {
  display: flex;
  align-items: center;
  max-width: 100%;
  height: 30px;
  padding: 0 14px 0 15px;
  border-radius: 20px;
  background: #1d1d1d;
  color: rgb(250, 249, 249);
}

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes aniUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes aniDown {
  to {
    opacity: 0;
  }
}

.toggleBB-enter-active,
.toggleBB-leave-active {
  animation: aniUp 0.3s;
}

.toggleBB-leave-active,
.toggleBB-leave-to {
  animation: aniDown 0.5s;
}

.srvErrorOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 26, 26, 0.97);
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(228, 228, 228);
  font-size: 20px;
}

.srvErrorOverlay > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.srvErrorOverlay > div > div {
  margin: 30px 0;
}

.srvErrorOverlay > div > button {
  padding: 15px 70px;
  border: 1px solid rgb(63, 63, 63);
  cursor: pointer;
  background-color: rgb(228, 228, 228);
  font-size: 20px;
  border-radius: 5px;
}

.srvErrorOverlay > div > button:active {
  background-color: rgb(202, 202, 202);
}

.loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 26, 26, 0.185);
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(228, 228, 228);
  font-size: 20px;
}
</style>

<template>
  <div
    v-if="appStore.showDropMenu"
    @click.self="hide()"
    class="menu-layout"
  ></div>
  <transition name="toggleBB">
    <div v-if="appStore.showDropMenu" class="menu" @click="hide()">
      <div class="items-container">
        <div
          v-for="(item, index) in content"
          :key="index"
          @click="item.click"
          class="item"
          :style="'color:' + item.color"
        >
          <div class="item-icon">
            <div class="icon">
              <svg-icon type="mdi" :path="item.icon"></svg-icon>
            </div>
          </div>
          <div class="item-data">
            <div class="item-text">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="js">
import { defineComponent } from 'vue';
import { useAppStore } from '../common/stores/app.store';
import { useUserStore } from '../user/user.store';
import SvgIcon from '@jamescoyle/vue-icon';

export default defineComponent({
  name: 'DropMenu',
  props: ['content'],
  components: { SvgIcon },
  setup() {
    const appStore = useAppStore();
    const userStore = useUserStore();
    return { appStore, userStore };
  },
  methods: {
    hide() {
      this.appStore.showDropMenu = false;
    },
  },
});
</script>

<style scoped>
.menu-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 19000;
  display: flex;
  flex-direction: column;
}

.menu {
  position: fixed;
  top: 10px;
  right: 8px;
  width: 300px;
  z-index: 20000;
  background-color: #313131;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #252525;
  user-select: none;
}

.item-arrow {
  color: #dab3b3;
}

.item {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 48px;
  color: #fde2e2;
  padding-left: 15px;
}

.item:active {
  background-color: #3a3a3a;
}

.item-icon {
  display: flex;
  align-items: center;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}

.item-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 18px;
  width: 100%;
}

.item-text {
  font-size: 16px;
}

@keyframes aniUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes aniDown {
  to {
    opacity: 0;
  }
}

.toggleBB-enter-active,
.toggleBB-leave-active {
  animation: aniUp 0.2s;
}

.toggleBB-leave-active,
.toggleBB-leave-to {
  animation: aniDown 0.15s;
}
</style>

<template>
  <transition name="toggleDC">
    <div
      v-if="appStore.showDrawer"
      @click.self="hide()"
      class="drawer-container"
    ></div>
  </transition>
  <transition name="toggleBB">
    <div
      v-if="appStore.showDrawer"
      class="drawer"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
    >
      <div class="header">
        <div class="header-caption">
          <img src="icon.png" width="23px" />
          <RouterLink
            to="/app"
            style="text-decoration: none; color: white; padding-top: 1px"
            >essenger</RouterLink
          >
        </div>
      </div>

      <div>
        <router-link :to="`/profile/${userStore.userId}`">
          <div class="account">
            <div class="user-avatar">
              <user-avatar
                :userName="userStore.userName"
                :avatar="userStore.userAvatar"
              />
            </div>
            <div class="user-info">
              <div class="user-name">{{ userStore.userName }}</div>
              <div class="user-name-caption">Профиль</div>
            </div>
            <div class="user-right">
              <div class="item-arrow">〉</div>
            </div>
          </div>
        </router-link>
      </div>

      <div class="items-container" @click="hide()">
        <router-link
          :to="item.link"
          v-for="(item, index) in content"
          :key="index"
        >
          <div class="item">
            <div class="item-icon">
              <div class="icon">
                <svg-icon type="mdi" :path="item.icon"></svg-icon>
              </div>
            </div>
            <div class="item-data">
              <div class="item-text">{{ item.title }}</div>
              <div v-if="item.caption" class="item-caption">
                {{ item.caption }}
              </div>
            </div>
            <div class="item-right">
              <div v-if="item.counter" class="item-counter">
                <div class="item-counter-leveler">
                  {{ item.counter }}
                </div>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </transition>
</template>

<script lang="js">
import { defineComponent } from 'vue';
import UserAvatar from 'src/user/UserAvatar.vue';
import { useAppStore } from '../common/stores/app.store';
import { useUserStore } from '../user/user.store';
import SvgIcon from '@jamescoyle/vue-icon';

export default defineComponent({
  name: 'DrawerPanel',
  props: ['content'],
  //emits: ['close'],
  components: { UserAvatar, SvgIcon },
  setup() {
    const appStore = useAppStore();
    const userStore = useUserStore();
    return { appStore, userStore };
  },
  data() {
    return {
      touchStartX: 0,
      touchStartY: 0,
      swipeThreshold: 80, // минимальное расстояние для свайпа
    };
  },
  methods: {
    hide() {
      this.appStore.showDrawer = false;
    },
    onTouchStart(event) {
      const touch = event.touches[0];
      this.touchStartX = touch.clientX;
      this.touchStartY = touch.clientY;
    },
    onTouchMove(event) {
      if (!this.appStore.showDrawer) {
        return;
      }

      const touch = event.touches[0];
      const touchEndX = touch.clientX;
      const touchEndY = touch.clientY;

      const deltaX = this.touchStartX - touchEndX;
      const deltaY = this.touchStartY - touchEndY;

      // Проверяем, является ли движение свайпом влево и достаточно ли оно большое
      if (deltaX > this.swipeThreshold && Math.abs(deltaY) < this.swipeThreshold) {
        this.appStore.showDrawer = false;
      }
    }
  },
});
</script>

<style scoped>
@font-face {
  font-family: 'headFont';
  src: url('/crimson/Crimson-SemiboldItalic.otf');
}

a {
  text-decoration: none;
}

.header-caption {
  font-size: 21px;
  padding-top: 21px;
  color: #ffefef;
  letter-spacing: 0.2px;
  height: 26px;
  display: flex;
  align-items: center;
  margin-left: 7px;
  margin-top: 5px;
}

.drawer-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 19000;
  background-color: hsla(0, 0%, 4%, 0.493);
  display: flex;
  flex-direction: column;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  z-index: 20000;
  background-color: #272727;
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  height: 60px;
  padding-left: 16px;
}

.account {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 75px;
  background-color: #5e4242;
  padding-left: 16px;
  margin-bottom: 18px;
}

.user-avatar {
  display: flex;
  align-items: center;
}

.user-info {
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-name {
  color: white;
}

.user-name-caption {
  color: #dab3b3;
  font-size: 12px;
}

.user-right {
  display: flex;
  color: white;
  width: 100%;
  padding-right: 15px;

  flex-direction: row-reverse;
  align-items: center;
}

.item-arrow {
  color: #dab3b3;
}

.items-container {
  overflow-y: auto;
}

.item {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 48px;
  color: #fde2e2;
  padding-left: 12px;
}

.item:active {
  background-color: #3a3a3a;
}

.item-icon {
  display: flex;
  align-items: center;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}

.icon span {
  font-size: 23px;
}

.item-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 30px;
  width: 100%;
}

.item-caption {
  color: #dab3b3;
  font-size: 12px;
}

.item-right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-right: 15px;
}

.item-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  min-width: 25px;
  height: 25px;
  background-color: #dddddd;
  font-size: 12px;
  color: #404749;
  padding: 8px;
}

.item-counter-leveler {
  margin-left: -1px;
  margin-bottom: -1px;
}

@keyframes aniUp {
  from {
    transform: translateX(-150%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes aniDown {
  to {
    transform: translateX(-150%);
  }
}

.toggleBB-enter-active,
.toggleBB-leave-active {
  animation: aniUp 0.3s;
}

.toggleBB-leave-active,
.toggleBB-leave-to {
  animation: aniDown 0.5s;
}

@keyframes containerShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes containerHide {
  to {
    opacity: 0;
  }
}

.toggleDC-enter-active,
.toggleDC-leave-active {
  animation: containerShow 0.3s;
}

.toggleDC-leave-active,
.toggleDC-leave-to {
  animation: containerHide 0.5s;
}
</style>

<template>
  <div class="q-pa-md">
    <div class="square" v-if="!file" @click="pickFiles">
      <q-icon
        name="add_a_photo"
        size="150px"
        class="cursor-pointer inner-block"
        style="color: #c5c5c5"
      />
    </div>

    <cropper
      v-if="file"
      ref="cropper"
      class="cropper"
      :src="image.src"
      :stencil-props="{
        aspectRatio: 1 / 1,
      }"
      @change="change"
      :stencil-component="nonReactiveCircleStencil"
    />
    <br />

    <div class="buttonBar">
      <div class="center">
        <q-file
          ref="file"
          filled
          bottom-slots
          v-model="file"
          label="Выбрать аватар"
          counter
          @update:model-value="handleFileChange"
          accept=".jpg, .jpeg, .png, .gif, .bmp, .webp, .avif"
          class="full-width"
          :max-file-size="10 * 1_048_576"
        >
          <template v-slot:prepend>
            <q-icon name="cloud_upload" @click.stop.prevent />
          </template>
          <template v-slot:append>
            <q-icon
              name="close"
              @click.stop.prevent="reset"
              class="cursor-pointer"
            />
          </template>

          <template v-slot:hint> Не более 10 Мб </template>
        </q-file>
      </div>

      <div class="center">
        <q-btn
          color="brown-10"
          class="full-width"
          size="lg"
          @click="onSubmit"
          :label="submitLabel"
        />
      </div>
    </div>
  </div>
</template>

<script lang="js">
import { defineComponent, markRaw } from 'vue';
import { useUserStore } from '../../user/user.store';
import { Cropper, CircleStencil } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';

const userStore = useUserStore();

function getMimeType(file, fallback = null) {
  const byteArray = new Uint8Array(file).subarray(0, 4);
  let header = '';
  for (let i = 0; i < byteArray.length; i++) {
    header += byteArray[i].toString(16);
  }
  switch (header) {
    case '89504e47':
      return 'image/png';
    case '47494638':
      return 'image/gif';
    case 'ffd8ffe0':
    case 'ffd8ffe1':
    case 'ffd8ffe2':
    case 'ffd8ffe3':
    case 'ffd8ffe8':
      return 'image/jpeg';
    case '424d':
    case '4d42':
      return 'image/bmp';
    case '52494646':
      return 'image/webp';
    case '61764966':
      return 'image/avif';
    default:
      return fallback;
  }
}

export default defineComponent({
  name: 'EditAvatar',
  components: { Cropper },

  setup() {
    const nonReactiveCircleStencil = markRaw(CircleStencil);
    return {
      nonReactiveCircleStencil,
    };
  },

  data() {
    return {
      CircleStencil,
      submitLabel: 'Отмена',
      imageBlob: null,
      image: {
        src: null,
        type: null,
      },
      cropWidth: 0,
      cropHeight: 0,
      cropLeft: 0,
      cropTop: 0,
      file: null,
    };
  },

  methods: {
    pickFiles(){
      this.$refs.file.pickFiles();
    },

    handleFileChange() {
      if (this.file) {
        if (this.image.src) {
          URL.revokeObjectURL(this.image.src);
        }
        const blobUrl = URL.createObjectURL(this.file);
        const reader = new FileReader();
        reader.onload = (e) => {
          this.image = {
            src: blobUrl,
            type: getMimeType(e.target.result, this.file.type),
          };
        };
        reader.readAsArrayBuffer(this.file);
        this.imageBlob = this.file;
      }
    },

    change({ coordinates }) {
      this.cropWidth = coordinates.width;
      this.cropHeight = coordinates.height;
      this.cropLeft = coordinates.left;
      this.cropTop = coordinates.top;
    },

    reset() {
      this.file = null;
      this.image = {
        src: null,
        type: null,
      };
    },

    async onSubmit() {
      const formData = {
        imageBlob: this.imageBlob,
        cropWidth: this.cropWidth,
        cropHeight: this.cropHeight,
        cropLeft: this.cropLeft,
        cropTop: this.cropTop,
      };

      if (this.file) {
        this.$emit('submitForm', formData);
      } else {
        this.$emit('submitForm', false);
      }
    },

  watch: {
    file() {
      if (this.file) {
        this.submitLabel = 'Сохранить';
      } else {
        this.submitLabel = 'Отмена';
      }
    },
  },

  unmounted() {
    if (this.image.src) {
      URL.revokeObjectURL(this.image.src);
    }
  },
});
</script>

<style scoped>
.cropper {
  min-height: 300px;
  max-height: 600px;
  margin: auto;
}

.center {
  display: flex;
  justify-content: center;
  margin-top: 17px;
}

.buttonBar {
  position: fixed;
  bottom: 0;

  left: 0;
  right: 0;
  padding: 10px;
  padding-bottom: 40px;
}

.square {
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: calc(100% - 40px);
  max-width: 500px;
  min-width: 100px;
  aspect-ratio: 1 / 1;
  max-height: 500px;
  min-height: 100px;
  position: relative;
  box-sizing: border-box;
  border: 1px dashed rgb(194, 194, 194);
  background-color: #ebebeb69;
  margin-top: 20px;
}

.inner-block {
  margin-top: -8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(
    -50%,
    -50%
  );
  width: 50%;
  height: 50%;
}
</style>