<script setup lang="ts">
import { $enum } from 'ts-enum-util';

enum Direction {
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
  Up = 'UP',
}

enum TestEnum {
  A,
  B,
}

const visitValue = (value: Direction | null | undefined) => {
  $enum.visitValue(value).with({
    [$enum.handleNull]: () => {},
    [$enum.handleUndefined]: () => {},
    [$enum.handleUnexpected]: () => {},
    [Direction.Down]: () => {},
    [Direction.Left]: () => {},
    [Direction.Right]: () => {},
    [Direction.Up]: () => {},
  });
};

const mapValue = (value: Direction | null | undefined) => {
  return $enum.mapValue(value).with({
    [$enum.handleNull]: 'Null',
    [$enum.handleUndefined]: 'Undefined',
    [$enum.handleUnexpected]: 'Unexpected',
    [Direction.Down]: 'Down',
    [Direction.Left]: 'Left',
    [Direction.Right]: 'Right',
    [Direction.Up]: 'Up',
  });
};
</script>

<template>
  <h1>TS Enum Util</h1>
  <div flex="~ row">
    <button class="green" @click="$router.back()">Back</button>
  </div>
  <main>
    <p>TestEnum: {{ TestEnum }}</p>
    <p>Direction: {{ Direction }}</p>
    <ul list-circle>
      <li>{{ `.getKeys(): ${$enum(Direction).getKeys()}` }}</li>
      <li>{{ `.getValues(): ${$enum(Direction).getValues()}` }}</li>
      <li><button class="green" @click="visitValue(Direction.Up)">Visit Value</button></li>
      <li>{{ `.mapValue(null): ${mapValue(null)}` }}</li>
      <li>getKeyOrDefault</li>
      <li>getValueOrDefault</li>
    </ul>
  </main>
</template>
