<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useScoreboardStore } from '../stores/scoreboard';

const scoreboardStore = useScoreboardStore();

const stageOptions = [
  'pools',
  'top 128',
  'top 96',
  'top 64',
  'top 48',
  'top 32',
  'top 16',
  'top 8',
  'top 4',
  'Quarter Final',
  'Semi Final',
  'Final',
  'Grand Final',
  'Grand Final Reset',
];

const bracketSideOptions = [
  { label: 'None', value: '' },
  { label: 'Winners', value: 'Winners' },
  { label: 'Loosers', value: 'Loosers' },
];

const stage = ref(stageOptions[0]);
const bracketSide = ref('');
const customActive = ref(false);
const customText = ref('');
const hasChanges = ref(false);

const parseInitialRound = () => {
  const round = scoreboardStore.scoreboard.round.trim();
  if (!round) {
    customText.value = '';
    return;
  }

  for (const option of bracketSideOptions) {
    if (!option.value) {
      continue;
    }
    const prefix = `${option.value} `;
    if (round.startsWith(prefix)) {
      const remainder = round.slice(prefix.length);
      if (stageOptions.includes(remainder)) {
        stage.value = remainder;
        bracketSide.value = option.value;
        customText.value = round;
        return;
      }
    }
  }

  if (stageOptions.includes(round)) {
    stage.value = round;
    bracketSide.value = '';
    customText.value = round;
    return;
  }

  customActive.value = true;
  customText.value = round;
};

const updateRound = () => {
  if (!hasChanges.value) {
    return;
  }
  if (customActive.value) {
    scoreboardStore.scoreboard.round = customText.value.trim();
    return;
  }

  const prefix = bracketSide.value ? `${bracketSide.value} ` : '';
  scoreboardStore.scoreboard.round = `${prefix}${stage.value}`.trim();
};

watch([stage, bracketSide, customText, customActive], updateRound);

watch(customActive, (value) => {
  if (value && !customText.value) {
    customText.value = scoreboardStore.scoreboard.round;
  }
});

watch(customText, (value) => {
  if (!value.trim()) {
    customActive.value = false;
  }
});

onMounted(() => {
  parseInitialRound();
  hasChanges.value = true;
});
</script>

<template>
  <div class="bracket-panel">
    <QCard
      flat
      bordered
    >
      <QCardSection class="bracket-panel-header">
        <div class="text-h4">
          Bracket
        </div>
      </QCardSection>
      <QSeparator />

      <QCardSection class="column q-gutter-md">
        <QSelect
          v-model="stage"
          label="Stage"
          :options="stageOptions"
          dense
          outlined
        />
        <QSelect
          v-model="bracketSide"
          label="Bracket side"
          :options="bracketSideOptions"
          dense
          outlined
          emit-value
          map-options
        />
        <div class="bracket-panel-custom">
          <QInput
            v-model="customText"
            label="Custom progress"
            dense
            outlined
            class="bracket-panel-custom-input"
          />
          <QToggle
            v-model="customActive"
            :disable="!customText.trim()"
            color="secondary"
            class="bracket-panel-custom-toggle"
          />
        </div>
      </QCardSection>
    </QCard>
  </div>
</template>

<style scoped>
.bracket-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bracket-panel-header {
  display: flex;
  align-items: center;
  padding-bottom: 4px;
}

.bracket-panel-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}

.bracket-panel-custom-input {
  min-width: 0;
}

.bracket-panel-custom-toggle {
  align-self: center;
  margin-top: 0;
}
</style>
