<script lang='ts' setup>
import {twMerge} from "tailwind-merge";

defineOptions({name: 'ADigitBadge'})

interface Props {
  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
  view?: 'default' | 'inverted'
  size?: 'sm' | 'md' | 'lg'
  value: string | number
  disabled?: boolean
  customClasses?: string
  prefix?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  view: 'default',
  size: 'lg',
  disabled: false,
  customClasses: '',
  prefix: ''
})
const formattedValue = computed(() => {
  return Number(props.value).toLocaleString('ru-RU');
});
const classes = computed(() =>
  [
    props.disabled ? 'text-gray-500 bg-deepblue-900/5' : typeSwitchValues[props.view][props.type],
    'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none',
    sizeSwitchValues[props.size],
    props.value && props.value.toString().length > 2 ? 'w-auto' : '',
  ])

export type StateType = {
  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string;
};
type ViewType = {
  default: StateType
  inverted: StateType
  transparent: StateType
};

type SizeSwitchValues = {
  [key in 'sm' | 'md' | 'lg']: string;
};

const typeSwitchValues: ViewType = {
  default: {
    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
    warning: 'bg-yellow-400 text-white dark:text-gray-900',
    gray: 'bg-gray-50 text-gray-500  dark:text-gray-900',
    orange: 'bg-orange-600 text-white dark:bg-orange-500 dark:text-gray-900'
  },
  inverted: {
    primary: 'bg-white text-blue-700 dark:text-blue-500 dark:bg-gray-900',
    success: 'bg-white text-green-500 dark:text-green-400 dark:bg-gray-900',
    danger: 'bg-white text-red-500 dark:text-red-400 dark:bg-gray-900',
    warning: 'bg-white text-yellow-400 dark:bg-gray-900',
    gray: 'bg-white text-gray-500 dark:text-gray-200 dark:bg-gray-200/10',
    orange: 'bg-white text-deepblue-900 dark:text-orange-500 dark:bg-gray-900',
  },
  transparent: {
    success: 'bg-green-500/20 text-green-500',
    danger: 'bg-red-500/20 text-red-500 dark:text-red-400',
  }
}

const sizeSwitchValues: SizeSwitchValues = {
  sm: 'w-4 h-4 px-1 text-[9.5px]',
  md: 'w-5 h-5 px-1 text-[10px]',
  lg: 'px-2 w-6 h-6 text-xs font-semibold'
}
</script>
<template>
  <div
    :class="twMerge(...classes, customClasses)"
  >
    {{ prefix }}{{ formattedValue }}
  </div>
</template>
