import { defineComponent } from 'vue';
import { NuxtLink } from '#components';

import './Nav.scss';

export default defineComponent({
  setup() {
    const { setMe } = useMe();

    const expanded = useState(() => false);
    const toggle = () => {
      expanded.value = !expanded.value;
    };

    const classes = computed(() => ({
      'ex-admin-nav': true,
      'ex-admin-nav_expanded': expanded.value,
    }));

    const logout = () => {
      setMe(null);
      useGqlToken({
        token: null,
        config: { type: 'Bearer' },
      });
    };

    return () => (
      <nav class={classes.value}>
        <button
          class="ex-admin-nav--toggle"
          type="button"
          onClick={() => toggle()}
          aria-label="Toggle"
        >
          <font-awesome-icon
            icon={`fa-solid fa-arrow-${expanded.value ? 'left' : 'right'}`}
          />
        </button>
        <ul class="ex-admin-nav--menu">
          <li class="ex-admin-nav--menu-item">
            <NuxtLink
              class="ex-admin-nav--menu-item-action"
              to="/"
            >
              <font-awesome-icon
                class="ex-admin-nav--menu-item-icon"
                icon="fa-solid fa-home"
              />
              <span class="ex-admin-nav--menu-item-title">Website</span>
            </NuxtLink>
          </li>

          <li class="ex-admin-nav--menu-spacer"></li>

          <li class="ex-admin-nav--menu-item">
            <button
              type="button"
              class="ex-admin-nav--menu-item-action"
              onClick={() => logout()}
            >
              <font-awesome-icon
                class="ex-admin-nav--menu-item-icon"
                icon="fa-solid fa-right-from-bracket"
              />
              <span class="ex-admin-nav--menu-item-title">Logout</span>
            </button>
          </li>
        </ul>
      </nav>
    );
  },
});