<script>
  import { getContext } from 'svelte';
  import xAxes from '$lib/data/xAxes.js';
  import yAxes from '$lib/data/yAxes.js';
  import ChartDisplay from '$components/ChartDisplay.svelte';
  import DiceRoller from '$components/DiceRoller.svelte';
  import ThemeSelector from '$components/ThemeSelector.svelte';
  import Toggle from '$components/Toggle.svelte';

  const theme = getContext('theme');
  let currentTheme;
  theme.subscribe(value => {
    currentTheme = value;
  });

  let adultMode = false;
  let currentChart = null;
  let diceRoll = null;

  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">
  <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>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>
      
      <fieldset>
        <legend>Theme Selector</legend>
        <ThemeSelector bind:currentTheme={$theme} />
      </fieldset>
    </div>
  </div>
</div>