<script setup lang="ts">
import { computed } from 'vue';

import huaweiIcon from '#/assets/datacenter/huawei-icon.svg';
import mysqlIcon from '#/assets/datacenter/mysql-icon.svg';
import postgresqlIcon from '#/assets/datacenter/postgresql-icon.svg';

const props = defineProps<{
  sourceType?: string;
}>();

const sourceLogoMap: Record<string, string> = {
  EXCEL: 'excel',
  EXCEL_MATERIALIZED: 'excel',
  GAUSSDB_NATIVE: 'gaussdb',
  GBASE_8A: 'gbase',
  GBASE_8S: 'gbase',
  MYSQL: 'mysql',
  ORACLE: 'oracle',
  POSTGRESQL: 'postgresql',
  PROJECT_MYSQL: 'mysql',
};

const logoType = computed(
  () => sourceLogoMap[props.sourceType || ''] || 'default',
);
const assetLogoMap: Record<string, string> = {
  gaussdb: huaweiIcon,
  mysql: mysqlIcon,
  postgresql: postgresqlIcon,
};
const assetLogo = computed(() => assetLogoMap[logoType.value] || '');
</script>

<template>
  <img
    v-if="assetLogo"
    class="brand-logo-image"
    :src="assetLogo"
    :alt="`${props.sourceType || 'database'} logo`"
  />

  <svg
    v-else-if="logoType === 'oracle'"
    viewBox="0 0 24 24"
    fill="none"
    aria-hidden="true"
  >
    <rect x="4.6" y="7.2" width="14.8" height="9.6" rx="4.8" fill="#ea4335" />
    <rect x="7.1" y="9.35" width="9.8" height="5.3" rx="2.65" fill="white" />
    <rect x="8.4" y="10.65" width="7.2" height="2.7" rx="1.35" fill="#ea4335" />
  </svg>

  <svg
    v-else-if="logoType === 'gbase'"
    viewBox="0 0 24 24"
    fill="none"
    aria-hidden="true"
  >
    <circle cx="12" cy="12" r="8" fill="#10b981" />
    <path
      d="M15.85 9.2C15.1 8.02 13.8 7.3 12.38 7.3C9.94 7.3 8.1 9.14 8.1 11.98C8.1 14.87 10.05 16.7 12.56 16.7C13.88 16.7 15.03 16.18 15.88 15.15V12.55H12.45"
      stroke="white"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="1.7"
    />
  </svg>

  <svg
    v-else-if="logoType === 'excel'"
    viewBox="0 0 24 24"
    fill="none"
    aria-hidden="true"
  >
    <rect x="4.4" y="4.2" width="15.2" height="15.6" rx="3.2" fill="#16a34a" />
    <path
      d="M9 9L11.1 12L9 15M15 9L12.9 12L15 15"
      stroke="white"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="1.65"
    />
  </svg>

  <svg v-else viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <ellipse cx="12" cy="6.5" rx="5.75" ry="2.5" fill="#94a3b8" />
    <path
      d="M6.25 6.5V12.2C6.25 13.58 8.82 14.7 12 14.7C15.18 14.7 17.75 13.58 17.75 12.2V6.5"
      fill="#cbd5e1"
    />
    <path
      d="M6.25 12.2V17.35C6.25 18.72 8.82 19.85 12 19.85C15.18 19.85 17.75 18.72 17.75 17.35V12.2"
      fill="#e2e8f0"
    />
  </svg>
</template>

<style scoped>
.brand-logo-image {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
</style>
