<template>
  <!-- TODO: create logic with isActive prop for BottomNavigationItems -->
  <SfBottomNavigation class="smartphone-only">
    <nuxt-link
      data-cy="bottom-navigation-url_home"
      to="/"
    >
      <SfBottomNavigationItem
        :class="$route.path === '/' ? 'sf-bottom-navigation__item--active' : ''"
        icon="home"
        size="20px"
        label="Home"
      />
    </nuxt-link>
    <SfBottomNavigationItem
      data-cy="bottom-navigation-url_menu"
      icon="menu"
      size="20px"
      label="Menu"
    />
    <SfBottomNavigationItem
      data-cy="bottom-navigation-url_account"
      icon="profile"
      size="20px"
      label="Account"
      @click="handleAccountClick"
    />
    <!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
    <SfBottomNavigationItem
      data-cy="bottom-navigation-url_add-to-cart"
      label="Basket"
      icon="add_to_cart"
      @click="toggleCartSidebar"
    >
      <template #icon>
        <SfCircleIcon aria-label="Add to cart">
          <SfIcon
            icon="add_to_cart"
            color="white"
            size="25px"
            :style="{margin: '0 0 0 -2px'}"
          />
        </SfCircleIcon>
      </template>
    </SfBottomNavigationItem>
  </SfBottomNavigation>
</template>

<script>
import { SfBottomNavigation, SfCircleIcon, SfIcon } from '@borngroup/lightswitch-storefront-ui-vue';
import useUiState from '../composables/useUiState';
import { useUser } from '@borngroup/lightswitch-shopify';

export default {
  components: {
    SfBottomNavigation,
    SfIcon,
    SfCircleIcon
  },
  setup(props, { root }) {
    const { toggleCartSidebar, toggleLoginModal } = useUiState();
    const { isAuthenticated } = useUser();

    // eslint-disable-next-line @typescript-eslint/require-await
    const handleAccountClick = async () => {
      if (isAuthenticated.value) {
        return root.$router.push('/my-account');
      }
      toggleLoginModal();
    };

    return {
      toggleCartSidebar,
      handleAccountClick
    };
  }
};
</script>
