<template lang="pug">
  .w-full.flex
    calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
    calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
    calendar-wrapper.ml-2(:open-sidebar="isOpen")
    base-modal(v-model="isShowForm", title="Создание записи", modal-padding)
      record-creation-form(v-model="isShowForm", :close-form="closeForm")
    base-modal(v-model="previewVisibility", :hideHeader="true", :modalPadding="true")
      calendar-record-preview(v-model:preview-visibility="previewVisibility")
</template>

<script>
import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
import * as moment from "moment/moment";
import BaseModal from "@/components/base/BaseModal.vue";
import CalendarRecordPreview from "./components/CalendarRecordPreview.vue";
import { mapActions, mapState } from "vuex";
export default {
  name: "TheCalendar",
  components: {
    CalendarSidebar,
    CalendarOpenSidebar,
    CalendarWrapper,
    RecordCreationForm,
    BaseModal,
    CalendarRecordPreview,
  },
  data() {
    return {
      isOpen: false,
      currentDate: moment(),
      isShowForm: false,
      previewVisibility: false,
    };
  },
  computed: {
    ...mapState({
      selectedRecordId: (state) => state.calendar.selectedRecordId,
    }),
  },
  methods: {
    openSidebar() {
      this.isOpen = !this.isOpen;
    },
    createForm() {
      this.isShowForm = true;
    },
    closeForm() {
      this.isShowForm = false;
    },
    ...mapActions({
      changeSelectedRecordId: "changeSelectedRecordId",
    }),
  },
  watch: {
    selectedRecordId(value) {
      if (value) this.previewVisibility = !!value;
    },
    previewVisibility(value) {
      if (!value) this.changeSelectedRecordId(null);
    },
  },
};
</script>

<style lang="sass" scoped>
.close
  opacity: 0
  width: 0px
  height: 0
  transition: opacity 0.2s, width 0.3s

.active
  opacity: 1
  width: 232px
  height: 100%
  transition: opacity 0.5s, width 0.3s
</style>
