<script>
	import { xAxes, yAxes } from '$lib';
	import ChartDisplay from '$components/chartDisplay.svelte';
	import DiceRoller from '$components/diceRoller.svelte';

	let adultMode = $state(false);
	let currentChart = $state({ x: [''], y: [''] });
	let diceRoll = $state({ x: 0, y: 0 });

	function generateChart() {
		const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
		const availableYAxes = adultMode ? yAxes : yAxes.filter((axis) => !axis.adult);

		const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
		const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];

		currentChart = {
			x: randomX.values,
			y: randomY.values
		};
	}

	function rollDice() {
		diceRoll = {
			x: Math.floor(Math.random() * 10) + 1,
			y: Math.floor(Math.random() * 10) + 1
		};
	}
</script>

<div class="container theme-{currentTheme}">
  <div class="window">
    <div class="title-bar">
      <a href="/" class="home-button">← Home</a>
      <span>On the Spectrum - Party Game</span>
    </div>
    
    <div class="window-body">
      <fieldset>
        <legend>Theme Selector</legend>
        <ThemeSelector bind:currentTheme />
      </fieldset>

      <fieldset>
        <legend>Adult Mode (18+)</legend>
        <Toggle bind:checked={adultMode} />
      </fieldset>

      <fieldset>
        <legend>Chart Generator</legend>
        <ChartDisplay chart={currentChart} />
        <div class="button-row">
          <button on:click={generateChart}>Generate</button>
        </div>
      </fieldset>

      <fieldset>
        <legend>Position Roller</legend>
        <DiceRoller roll={diceRoll} />
        <div class="button-row">
          <button on:click={rollDice}>Roll Dice</button>
        </div>
      </fieldset>
    </div>
  </div>
</div>