// BoxIcon.vue
<template lang="pug" functional>
    svg(version="1.1" viewBox="0 0 100 100" :width="width" :height="height" xmlns="http://www.w3.org/2000/svg")
        g
            circle(cx="50" cy="50" r="50" fill="#407900" stroke-width="3" stroke="#fff")
        path(d="m17.268 25.299-6.3867 13.324h7.8711v40.832h62.25v-40.832h7.8691l-6.3867-13.324z" fill="#fff")
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

const BoxIconProps = Vue.extend({
    props: {
        width: {
            type: String,
            required: true
        },
        height: {
            type: String,
            required: true
        }
    }
});

@Component
export default class BoxIcon extends BoxIconProps {}
</script>



// ikona se pouziva obecne v CardSymbol, kde to nemam resene moc hezky ale nevidim duvod proc by to nemelo fungovat tak jak chcu
// CardSymbol.vue
<template lang="pug">
    WheatIcon(v-if="symbol === symbols.Wheat" :width="width" :height="height")
    BoxIcon(v-else-if="symbol === symbols.Box" :width="width" :height="height")
    PigIcon(v-else-if="symbol === symbols.Pig" :width="width" :height="height")
    CoffeeIcon(v-else-if="symbol === symbols.Coffee" :width="width" :height="height")
    CogIcon(v-else-if="symbol === symbols.Cog" :width="width" :height="height")
    FactoryIcon(v-else-if="symbol === symbols.Factory" :width="width" :height="height")
    BoatIcon(v-else-if="symbol === symbols.Boat" :width="width" :height="height")
    MallIcon(v-else-if="symbol === symbols.Mall" :width="width" :height="height")
    SuitcaseIcon(v-else-if="symbol === symbols.Suitcase" :width="width" :height="height")
    TowerIcon(v-else :type="towerType" :width="width" :height="height")
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TowerIcon from './icons/TowerIcon.vue';
import BoatIcon from './icons/BoatIcon.vue';
import BoxIcon from './icons/BoxIcon.vue';
import CoffeeIcon from './icons/CoffeeIcon.vue';
import CogIcon from './icons/CogIcon.vue';
import FactoryIcon from './icons/FactoryIcon.vue';
import MallIcon from './icons/MallIcon.vue';
import PigIcon from './icons/PigIcon.vue';
import SuitcaseIcon from './icons/SuitcaseIcon.vue';
import WheatIcon from './icons/WheatIcon.vue';
import { CardColor, CardSymbol as SymbolEnum } from '~/utils/cards';

const CardSymbolProps = Vue.extend({
    props: {
        symbol: {
            required: true,
            type: Number,
            validator (value) {
                return Number(value) in SymbolEnum;
            }
        },
        // if symbol is Tower, two additional properties must be provided
        // eslint-disable-next-line vue/require-default-prop
        color: {
            required: false,
            type: Number,
            validator (value) {
                return Number(value) in CardColor;
            }
        },
        bought: {
            required: false,
            type: Boolean
        },
        width: {
            type: String,
            required: false,
            default: '20'
        },
        height: {
            type: String,
            required: false,
            default: '20'
        }
    }
});

@Component({
    components: {
        BoatIcon,
        BoxIcon,
        CoffeeIcon,
        CogIcon,
        FactoryIcon,
        MallIcon,
        PigIcon,
        SuitcaseIcon,
        TowerIcon,
        WheatIcon
    }
})
export default class CardSymbol extends CardSymbolProps {
    readonly symbols = SymbolEnum;

    get towerType (): 'purple'|'dominant-inactive'|'dominant-active' {
        if (this.color === CardColor.Purple) {
            return 'purple';
        }
        return this.bought ? 'dominant-active' : 'dominant-inactive';
    }
}
</script>

// tenhle symbol se pak pouziva obecne v komponente karty, kde ho pak vkladam takhle:
CardSymbol(:symbol="info.card.symbol" :color="info.card.color" width="20" height="20")

// stejne to blblo i kdyz width a height byly cisla