<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { $t } from '@easyflow/locales';

import { EasyFlowButton } from '@easyflow-core/shadcn-ui';

import { useQRCode } from '@vueuse/integrations/useQRCode';

import Title from './auth-title.vue';

interface Props {
  /**
   * @zh_CN 是否处于加载处理状态
   */
  loading?: boolean;
  /**
   * @zh_CN 登录路径
   */
  loginPath?: string;
  /**
   * @zh_CN 标题
   */
  title?: string;
  /**
   * @zh_CN 描述
   */
  subTitle?: string;
  /**
   * @zh_CN 按钮文本
   */
  submitButtonText?: string;
  /**
   * @zh_CN 描述
   */
  description?: string;
  /**
   * @zh_CN 是否显示返回按钮
   */
  showBack?: boolean;
}

defineOptions({
  name: 'AuthenticationQrCodeLogin',
});

const props = withDefaults(defineProps<Props>(), {
  description: '',
  loading: false,
  showBack: true,
  loginPath: '/auth/login',
  submitButtonText: '',
  subTitle: '',
  title: '',
});

const router = useRouter();

const text = ref('https://easyflow.vvbin.cn');

const qrcode = useQRCode(text, {
  errorCorrectionLevel: 'H',
  margin: 4,
});

function goToLogin() {
  router.push(props.loginPath);
}
</script>

<template>
  <div class="auth-qrcode-login">
    <Title>
      <slot name="title">
        {{ title || $t('authentication.welcomeBack') }}
      </slot>
      <template #desc>
        <span class="text-muted-foreground">
          <slot name="subTitle">
            {{ subTitle || $t('authentication.qrcodeSubtitle') }}
          </slot>
        </span>
      </template>
    </Title>

    <div class="auth-qrcode-panel mt-6">
      <div class="auth-qrcode-frame">
        <img :src="qrcode" alt="qrcode" class="auth-qrcode-image" />
      </div>
      <p class="text-muted-foreground mt-4 text-sm leading-6">
        <slot name="description">
          {{ description || $t('authentication.qrcodePrompt') }}
        </slot>
      </p>
    </div>

    <EasyFlowButton
      v-if="showBack"
      class="mt-6 h-11 w-full rounded-xl"
      variant="outline"
      @click="goToLogin()"
    >
      {{ $t('common.back') }}
    </EasyFlowButton>
  </div>
</template>

<style scoped>
.auth-qrcode-panel {
  text-align: center;
}

.auth-qrcode-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 17rem;
  padding: 1rem;
  margin: 0 auto;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 92%),
    rgb(244 249 255 / 96%)
  );
  border: 1px solid hsl(var(--line-subtle));
  border-radius: 1.5rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
}

.auth-qrcode-image {
  width: min(100%, 13rem);
  aspect-ratio: 1;
  border-radius: 1rem;
}

.dark .auth-qrcode-frame {
  background: linear-gradient(180deg, rgb(14 22 36 / 92%), rgb(11 19 31 / 96%));
}
</style>
