<template>
  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
    </div>
    <nav class="actions">
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
        <div class="icon" id="search-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
        </Transition>
      </button>
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
        <div class="icon" id="filter-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
        </Transition>
      </button>
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
        <div class="icon" id="instances-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
        </Transition>
      </button>
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
        <div class="icon" id="attachments-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
        </Transition>
      </button>
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
        <div class="icon" id="sell-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
        </Transition>
      </button>
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
        <div class="icon" id="archive-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
        </Transition>
      </button>
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
        <div class="icon" id="new-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
        </Transition>
      </button>
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
        <div class="icon" id="edit-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
        </Transition>
      </button>
      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
        <div class="icon" id="delete-icon">
          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
        </div>
        <Transition name="fade">
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
        </Transition>
      </button>
    </nav>
  </aside>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';

const darkMode = ref(true)
const isExpanded = ref(true)

// get accesss to the store
const store = useStore()
const toggleEditable = () => {
  store.commit('toggleEditable');
};
const deleteFunc = () => {
  store.commit('doDelete');
};

const toggleActionbar = () => {
  isExpanded.value = !isExpanded.value;
};
const toggleFiltered = () => {
  store.commit('toggleFiltered');
};
const toggleSearched = () => {
  store.commit('toggleSearchable');
};
const add = () => {
  store.commit('add');
};
</script>


<script>
export default {
  name: "Actionbar",
}
</script>



<style scoped>
* {
  box-sizing: border-box;
}


aside.actionbar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 5rem;
  height: fit-content;
  width: fit-content;
  inline-size: fit-content;
  border-radius: 0.625rem;
  flex: 0 0 0;
  align-items: stretch;
  justify-content: center;
  padding: 1.875rem 0.625rem;
  gap: 1.25rem;
  overflow: clip;
}
.actionbar-darkmode {
  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
  background-color: #2C2C2C;
}
.actionbar-lightmode {
  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
  background-color: #FFFFFF;
}
aside.is-expanded {
  animation: expand 0.5s linear both;
}
aside.is-not-expanded {
  animation: contract 0.5s linear both;
}


.actions {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  overflow: clip;
}


button {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  height: 1.875rem;
  border-radius: 0.625rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.125rem;
  border: none;
  transition: 0.2s ease-in-out;
  overflow: clip;
}
.button-darkmode { background-color: #2C2C2C; } 
.button-lightmode { background-color: #FFFFFF; } 

.button-darkmode:hover, 
.indicator-darkmode:hover { background-color: #444444; } 

.button-lightmode:hover, 
.indicator-lightmode:hover {  background-color: #ACACAC; } 

.is-not-expanded>button { align-self: center; }


.icon {
  display: flex;
  flex-direction: row;
  /*width: 0.875rem;*/
  height: 1.875rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
}
.is-not-expanded .icon {
  align-self: center;
}

#indicator-icon {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.3125rem;
  transition: 0.2s ease-in-out;
} 
.is-not-expanded #indicator-icon { transform: rotate(180deg); }


img {
  width: 0.875rem;
  height: 0.875rem;
  object-fit: contain;
  object-position: center;
  overflow: hidden;
}
.img-darkmode { filter: invert(100%); } 
#indicator-icon>img { height: 1.25rem; }


.label {
  display: inline-flex;
  min-width: 0;
  padding: 0rem 0.625rem 0rem 0rem;
  align-self: center;
  letter-spacing: 0.02rem;
  white-space: nowrap;
  font: 400 0.875rem/1.25rem Overpass, sans-serif;
} 
.label-darkmode { color: #FFFFFF; } 
.label-lightmode { color: #000000; }



.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active {
  transition: all 0.75s;
  overflow: clip;
  animation: fade-in 0.5s linear forwards;
}

.fade-leave-active {
  transition: all 0.75s;
  animation: fade-out 0.5s linear forwards;
}

.fade-move {
  transition: transform 5s
}

@keyframes expand {
  from {
    max-inline-size: 3.125rem;
    max-width: 3.125rem;
  }

  to {
    max-inline-size: 9.0625rem;
    max-width: 9.0625rem;
  }
}

@keyframes contract {
  from {
    max-inline-size: 9.0625rem;
    max-width: 9.0625rem;
  }

  to {
    max-inline-size: 3.125rem;
    max-width: 3.125rem;
  }
}

@keyframes fade-in {
  from {
    max-width: 0;
    max-inline-size: 0;
  }

  to {
    max-width: 7.5rem;
    width: fit-content;
  }
}

@keyframes fade-out {
  from {
    max-width: 7.5rem;
    width: fit-content;
  }

  to {
    max-width: 0;
    max-inline-size: 0;
  }
}
</style>