<template lang="pug">
  .sidebar.flex.flex-col.bg-white(:class="openSidebar")
    .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
        q-btn(
          color="primary",
          round,
          icon="add",
          size="13px",
          @click="openFormCreate",
          v-if="!isOpen"
        )
        q-btn(
          no-caps
          label="Создать событие",
          color="primary",
          class="text-weight-medium, full-width",
          icon-right="add",
          @click="openFormCreate",
          v-else
        )
        calendar-sidebar-event(:is-open="isOpen", :event-statuses="eventStatuses")
        calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen", :url="url")
        //.button-wrapper.flex.justify-center.mb-23px
          q-btn(
            round,
            icon="app:icon-long-arrow",
            size="13px",
            color="secondary",
            text-color="primary"
            :style="{ transform: `rotate(${turnButton})`}",
            @click="changeSize",
          )
</template>

<script>
import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";

export default {
  name: "CalendarSidebar",
  components: {
    CalendarSidebarEvent,
    CalendarSidebarTeammate,
  },
  props: {
    schedulesData: Array,
    openFormCreate: Function,
    eventStatuses: Array,
    url: String,
  },
  data() {
    return {
      widthSidebarOpen: "232px",
      widthSidebarClose: "72px",
      isOpen: false,
      turnButton: "180deg",
    };
  },
  computed: {
    openSidebar() {
      return {
        "open-sidebar": this.isOpen,
      };
    },
    sidebarWidth() {
      if (this.isOpen) {
        return {
          width: this.widthSidebarOpen,
        };
      }
      return {
        width: this.widthSidebarClose,
      };
    },
    teamData() {
      if (this.schedulesData.length === 0) return [];
      return this.schedulesData.map((elem) => elem.employee);
    },
  },
  methods: {
    changeSize() {
      this.isOpen = !this.isOpen;
      this.$emit(
        "width",
        this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
      );
      this.turnButton = this.isOpen ? "0deg" : "180deg";
    },
  },
};
</script>

<style lang="sass" scoped>
.sidebar
  border-top-right-radius: 4px

.sidebar-wrapper
  border-left: 2px solid var(--btn-blue-color-3)

.open-sidebar
  .sidebar-content
    display: flex
    flex-direction: column
    row-gap: 32px
    padding: 19px 16px
    align-items: center
    width: 232px

  .button-wrapper
    justify-content: end
    padding-right: 16px
</style>
