<!--
    #VUE3 Done

    Extends PxBaseVariants with the ability to specify default and base variants
    (see descriptions of props below).
-->

<script>
import PxBaseVariants from '../bases/PxBaseVariants.vue';

export default {
    mixins: [PxBaseVariants],
    props: {
        // variant that is always applied in addition to option specified by the variant prop
        variantBase: { type: [Array, String], default: '' },

        // variant that is applied only if no other variant is specified
        variantDefault: { type: [Array, String], default: '' },
    },
    computed: {
        // override variant value to include base and default variants
        variantValue() {
            // NOTE we can't use the computed property from the base class because it relies on
            // variantValue (this computed property) and would cause a circular reference
            const variantArray = this.toVariantsArray(this.variant);
            const baseArray = this.toVariantsArray(this.variantBase);
            const defaultArray = this.toVariantsArray(this.variantDefault);

            return this.toVariantsArray([
                ...baseArray,
                ...(variantArray.length ? variantArray : defaultArray),
            ]);
        },
    },
};
</script>
