<template>
    <div class="box-border relative text-white radial-progress">
        <svg class="transform -rotate-90" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="height: 100%; width: 100%">
            <circle
                class="radial-progress-ring__body"
                :r="50"
                :cx="50"
                :cy="50"/>
            <circle
                class="radial-progress-ring__progress"
                :stroke-width="ringWidth"
                :r="50 - ringWidth/2"
                :cx="50"
                :cy="50"
                ref="ring"
            />
            <text text-anchor="middle" alignment-baseline="central" x="50" y="50" :font-size="fontSize" transform="rotate(90) translate(0,-100)">{{ progressFormatted }}</text>
        </svg>
        <!-- <div class="antialiased flex absolute inset-0 items-center justify-center text-xs font-light rounded-full text-white">{{ progressFormatted }}%</div> -->
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export enum RadialProgressState {
    Downloading,
    Paused,
    Halted,
    Error
}

export default defineComponent({
    computed: {
        circumference(): number {
            return 2*Math.PI*(50 - this.ringWidth/2);
        },
        progressFormatted(): number {
            return Math.floor(100*(<number>this.progress));
        }
    },
    methods: {
        updateProgressBar() {
            (<HTMLElement>this.$refs.ring).style.strokeDasharray = `${this.circumference} ${this.circumference}`;
            (<HTMLElement>this.$refs.ring).style.strokeDashoffset = `${this.circumference - this.circumference*this.progress}`;
        }
    },
    mounted() {
        this.updateProgressBar();
    },
    props: {
        fontSize: {
            type: Number,
            required: true
        },
        progress: {
            type: Number,
            required: true
        },
        ringWidth: {
            type: Number,
            default: 1
        }
    },
    watch: {
        progress() {
            this.updateProgressBar();
        }
    }
});

</script>

<style lang="postcss">
    .radial-progress text {
        fill: white;
    }
    .radial-progress-ring__body {
        fill: #1f2937;
    }
    .radial-progress-ring__progress {
        fill: transparent;
        stroke: #34D399;
        transition: stroke-dashoffset 0.25s;
    }
    .bg-modal {
        background: rgba(0, 0, 0, 0.35);
        opacity: 0.0;
        transition: opacity 0.25s;
    }
    .show-state {
        opacity: 1.0;
    }
    .radial-progress:hover .bg-modal {
        opacity: 1.0;
    }
</style>
