<template>
  <div
    :class="`flex w-full  py-0 z-[99876678999] justify-between mdlg:px-0 px-0 sticky mdlg:pt-2 top-0 bg-white border-b-[1px] 
	${
    options.type == 'basic' || !showMobileSearch
      ? ' flex-row items-center '
      : 'mdlg:!flex-row lg:!flex-row flex-col mdlg:!items-center lg:!items-center '
  } border-gray-200
  ${!options.showBottomBorder ? 'mdlg:border-none' : 'mdlg:border-b-[1px]'}
  ${options.type != 'basic' && options.type != 'subpage' ? 'px-0' : 'mdlg:!px-0 px-3'}
  ${options.type == 'subpage' ? 'mdlg:!border-none' : ''}`"
  >
    <ts-header-text
      size="xl"
      :custom-class="` py-3 lg:py-3 mdlg:py-4  flex flex-row items-center lg:pt-6 ${
        options.type == 'subpage' || options.showTitle ? '' : 'mdlg:hidden'
      }`"
      v-if="options.type == 'basic' || options.type == 'subpage'"
    >
      <ts-icon
        v-if="options.type == 'subpage'"
        :name="'chevron-left'"
        @click="goBack()"
        custom-class="h-[12px] pr-[10px] cursor-pointer"
      />
      {{ options.pageTitle }}
    </ts-header-text>
    <div
      v-else
      :class="` ${
        showMobileSearch ? ' border-b-[1px]  border-gray-200 mdlg:!border-none' : ''
      } flex flex-row items-center space-x-3 lg:space-x-5 mdlg:!px-0 `"
    >
      <ts-header-text
        size="xl"
        v-for="(item, index) in options.switchItems"
        :key="index"
        @click.stop="selectedTab = item.key"
        :custom-class="` mdlg:border-b-[3px] border-b-[1.5px] px-3 mdlg:px-0 cursor-pointer ${
          selectedTab == item.key ? ' border-headerText ' : 'border-transparent '
        }   py-3 lg:!pb-2 mdlg:py-3 lg:pt-6`"
        :color="`${
          selectedTab == item.key ? ' text-headerText' : 'text-headerText opacity-40'
        }`"
      >
        {{ item.value }}
      </ts-header-text>
    </div>
    <div
      v-if="options.type != 'subpage'"
      :class="`hidden  items-center space-x-3 flex-grow mdlg:flex py-3  lg:pt-6 lg:py-3 mdlg:py-5 ${
        options.type == 'basic' && !options.showTitle ? 'flex-row' : 'flex-row-reverse'
      }`"
    >
      <ts-icon name="search" custom-class="h-[17px]" />
      <input
        type="text"
        class="w-[200px] focus:outline-none border-none placeholder-slate-600"
        placeholder="Search"
      />
    </div>
    <div
      v-if="options.type != 'subpage'"
      :class="` ${
        options.type == 'basic' ? '' : 'px-3 mdlg:!px-0'
      } space-x-5 flex flex-row items-center py-3 lg:py-3 lg:pt-6 mdlg:py-5`"
    >
      <ts-icon
        name="search"
        custom-class="mdlg:h-[17px] h-[17px] inline-block mdlg:hidden"
      />
      <ts-icon
        name="bell"
        v-if="options.hasNotification"
        @click="goToRoute('/notifications')"
        custom-class="mdlg:h-[19px] h-[18px] cursor-pointer"
      />
      <input
        type="text"
        v-if="showMobileSearch"
        class="w-full focus:outline-none border-none inline-block mdlg:hidden placeholder-slate-600"
        placeholder="Search"
      />
    </div>
  </div>
</template>
<script lang="ts">
import TsIcon from "../TsIcon/index.vue";
import TsHeaderText from "../TsTypography/headerText.vue";
import { ref, onMounted, watch } from "vue";

export default {
  components: {
    TsIcon,
    TsHeaderText,
  },
  props: {
    options: {
      required: true,
    },
    goBack: {
      type: Function,
      required: true,
    },
    goToRoute: {
      type: Function,
      required: true,
    },
  },
  emits: ["update:selectedTab"],
  name: "TsTopBar",
  setup(props: any, context: any) {
    const selectedTab = ref("");
    const showMobileSearch = ref(false);

    const selectDefaultTab = () => {
      if (props.options.type == "switch") {
        if (props.options.switchItems) {
          selectedTab.value = props.options.switchItems[0]?.key;
        }
      }
    };

    onMounted(() => {
      selectDefaultTab();
    });

    watch(props.options, () => {
      selectDefaultTab();
    });

    watch(selectedTab, () => {
      context.emit("update:selectedTab", selectedTab.value);
    });

    return {
      selectedTab,
      showMobileSearch,
    };
  },
};
</script>
