<script setup lang="ts">
import Button from 'primevue/button';
import type IVButton from './IVButton.type';
import { computed } from 'vue';
import styles from '@visua/typography.module.css';

// Props configuration with default values
const props = withDefaults(defineProps<IVButton>(), {
    disabled: false,
    label: undefined,
    secondary: false,
    tertiary: false,
    iconRight: false,
    iconOnly: false,
    noOutline: false,
    danger: false,
    size: 'md',
    icon: '',
    onClick: () => undefined,
})

// Button size class computed
const size = computed(() => {
  if (['sm', 'small'].includes(props.size)) return 'small';
  else if (['md', 'medium', '', undefined].includes(props.size)) return undefined;
  else if (['lg', 'large'].includes(props.size)) return 'large';
  else return undefined;
})

// Icon position computed
const iconPos = computed<string>(() => {
    return props.iconRight ? 'right': 'left'
})

// Button variant computed
const variant = computed(() => {
    if(props.noOutline) return 'text';
    else if (props.secondary || props.tertiary) return 'outlined';
    else return undefined;
})

// Button severity computed
const severity = computed(() => {
    if(props.secondary) return 'secondary';
    else if(props.danger) return 'danger';
    else return undefined
});

// Button font computed
const font = computed(() => {
    switch (size.value) {
        case 'large': return styles['text-body-LG-article-text-Regular'];
        case 'small': return styles['text-body-SM-detail-text-Regular'];
        default: return styles['text-body-MD-standard-text-Regular'];
    }
})

</script>

<template>
    <Button
      :label="props.iconOnly ? undefined : props.label"
      :variant="variant"
      :severity="severity"
      :icon="props.icon"
      :size="size"
      :class="['p-button', font]"
      v-bind="$attrs"
      :disabled="props.disabled"
      :aria-disabled="props.disabled"
      :icon-pos="iconPos"
      :onclick="props.onClick"
      :title="props.title"
      role="button"
      :aria-label="props.label"
    >
    </Button>
</template>

<style scoped>
/* disable state */
.p-button:disabled{
    /* variant: primary or default */
    --p-button-primary-background: var(--background-disabled-grey);
    --p-button-primary-hover-background: var(--background-disabled-grey);
    --p-button-primary-active-background: var(--background-disabled-grey);
    --p-button-primary-color: var(--text-disabled-grey);
    --p-button-primary-hover-color: var(--text-disabled-grey);
    --p-button-primary-active-color: var(--text-disabled-grey);
    /* variant: danger */
    --p-button-danger-background: var(--background-disabled-grey);
    --p-button-danger-hover-background: var(--background-disabled-grey);
    --p-button-danger-active-background: var(--background-disabled-grey);
    --p-button-danger-color: var(--text-disabled-grey);
    --p-button-danger-hover-color: var(--text-disabled-grey);
    --p-button-danger-active-color: var(--text-disabled-grey);
    /* variant: secondary and tertiary */
    --p-button-secondary-background: var(--background-transparent);
    --p-button-secondary-hover-background: var(--background-transparent);
    --p-button-secondary-active-background: var(--background-transparent);
    --p-button-secondary-border-color: var(--border-disabled-grey);
    --p-button-secondary-hover-border-color: var(--border-disabled-grey);
    --p-button-secondary-active-border-color: var(--border-disabled-grey);

    --p-button-outlined-primary-hover-background: var(--background-transparent);
    --p-button-outlined-primary-active-background: var(--background-transparent);
    --p-button-outlined-primary-border-color: var(--border-disabled-grey);
    --p-button-outlined-primary-color: var(--text-disabled-grey);
    --p-button-outlined-secondary-hover-background: var(--background-transparent);
    --p-button-outlined-secondary-active-background: var(--background-transparent);
    --p-button-outlined-secondary-border-color: var(--border-disabled-grey);
    --p-button-outlined-secondary-color: var(--text-disabled-grey);
    /* variant: no-outline */
    --p-button-text-primary-hover-background: var(--background-transparent);
    --p-button-text-primary-active-background: var(--background-transparent);
    --p-button-text-primary-color: var(--text-disabled-grey);
    -webkit-user-select: none;
    user-select: none;
}
</style>
