<template>
    <div>
        <div class="flex items-center mb-4 rounded dark:bg-2x-dark-foreground bg-light-300 h-2.5">
            <div v-for="(chart, i) in data" :key="i" :style="{width: (chart.progress > 1 ? chart.progress : 0) + '%'}" class="chart-wrapper">
				<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->

				<!--Only singe line-->
				<span
					v-if="data.length === 1"
					:class="[{
						'border-r-2 dark:border-gray-800 border-white rounded-tl-lg rounded-bl-lg': chart.progress < 100,
						'border-none rounded-lg': chart.progress >= 100
						}, chart.color]"
					class="chart-progress w-full h-2.5 block"
				>

				</span>

				<!--Multiple line-->
				<span
					v-if="data.length > 1 && chart.progress > 0"
					:class="[{
						'rounded-tl-lg rounded-bl-lg border-r-2 dark:border-gray-800 border-white': i === 0,
						'border-r-2 dark:border-gray-800 border-white': i < (data.length - 1),
						'rounded-tr-lg rounded-br-lg': i === (data.length - 1),
					}, chart.color]"
					class="chart-progress w-full h-2.5 block"
				></span>
            </div>
        </div>

        <footer class="flex items-center w-full overflow-x-auto">
            <DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" class="mr-5" />
        </footer>
    </div>
</template>

<script>
    import DotLabel from "./DotLabel";

	export default {
		name: 'ProgressLine',
		props: [
			'data',
		],
		components: {
			DotLabel,
		}
	}
</script>

<style lang="scss" scoped>
	.chart-progress {
		&.success {
			background: #0ABB87;
			box-shadow: 0 3px 10px rgba(#0ABB87, 0.5);
		}

		&.danger {
			background: #fd397a;
			box-shadow: 0 3px 10px rgba(#fd397a, 0.5);
		}

		&.warning {
			background: #ffb822;
			box-shadow: 0 3px 10px rgba(#ffb822, 0.5);
		}

		&.info {
			background: #5578eb;
			box-shadow: 0 3px 10px rgba(#5578eb, 0.5);
		}

		&.purple {
			background: #9d66fe;
			box-shadow: 0 3px 10px rgba(#9d66fe, 0.5);
		}

		&.secondary {
			background: #e1e1ef;
			box-shadow: 0 3px 10px rgba(#e1e1ef, 0.5);
		}
	}

	.dark .chart-progress {
		&.secondary {
			background: #282A2F !important;
			box-shadow: 0 3px 10px rgba(#282A2F, 0.5) !important;
		}
	}
</style>
