<script>
	import Tab, { Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import Paper, { Content } from '@smui/paper';
	let active = 'Dots';

	import Graph from '../components/Graph.svelte';
	import Circle from '../components/Circle.svelte';
	import Bars from '../components/Bars.svelte';
  	import Dots from '../components/Dots.svelte';
</script>

<svelte:head>
	<title>WeatherWand</title>
	<meta name="description" content="WeatherWand" />
</svelte:head>

<!-- <p>Diese Anwendung wandelt Einflüsse der Umwelt in eine neue Art der Visualisierung.</p> -->

<div>
	<TabBar tabs={['Dots', 'Graph', 'Circle', 'Bars']} let:tab bind:active>
		<Tab {tab}>
			<Label>{tab}</Label>
		</Tab>
	</TabBar>
   
	{#if active === 'Dots'}
		<Paper variant="unelevated">
			<Content>
				<Dots />
			</Content>
		</Paper>
	{:else if active === 'Graph'}
		<Paper variant="unelevated">
			<Content>
				<Graph />
			</Content>
		</Paper>
	{:else if active === 'Circle'}
		<Paper variant="unelevated">
			<Content>
				<Circle />
			</Content>
		</Paper>
	{:else if active === 'Bars'}
		<Paper variant="unelevated">
			<Content>
				<Bars />
			</Content>
		</Paper>
	{/if}
</div>

<style>
	:global(canvas) {
		width: 100% !important;
		height: 100% !important;
	}
</style>