<script setup lang="ts">
import ItToggleSwitch from "@/components/ui/ItToggleSwitch.vue";
import { computed, ref } from "vue";

export type ViewType = "path" | "list";

const props = defineProps<{
  initialView: ViewType;
}>();

const emit = defineEmits<{
  (event: "selectView", value: ViewType): void;
}>();

const selectedView = ref<ViewType>(props.initialView);

const activeStyle = "text-black";
const inactiveStyle = "text-gray-700";

const pathViewLabelStyle = computed(() =>
  selectedView.value == "path" ? activeStyle : inactiveStyle
);

const listViewLabelStyle = computed(() =>
  selectedView.value == "list" ? activeStyle : inactiveStyle
);

const onToggle = () => {
  if (selectedView.value == "path") {
    selectedView.value = "list";
  } else {
    selectedView.value = "path";
  }
  emit("selectView", selectedView.value);
};
</script>

<template>
  <div class="flex flex-row items-center space-x-2 text-sm">
    <span :class="pathViewLabelStyle">
      {{ $t("learningPathPage.pathView") }}
    </span>
    <ItToggleSwitch
      data-cy="view-switch"
      :initially-switched-left="selectedView == 'list'"
      @click="onToggle"
    ></ItToggleSwitch>
    <span :class="listViewLabelStyle">
      {{ $t("learningPathPage.listView") }}
    </span>
  </div>
</template>
