<template lang="pug">
  .schedule-wrapper.flex.w-full.flex-col
    .flex.w-full(v-for="schedule in serialized", :key="schedule.id")
      .edit.flex.items-center.justify-center.h-11.w-11
        .flex.icon-edit
      .name-employee.flex.justify-center.items-center.cursor-pointer
        span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
      .row.flex
        .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition(
          v-for="day in result",
          :key="day",
          :id="schedule.id + day",
          @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
          :class="choiceState(day, schedule.id)",
          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
        )
          .flex(
            :class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
          ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
</template>

<script>
export default {
  name: "ScheduleTableBody",
  props: {
    serialized: Array,
    trimOwnerName: Function,
    result: Array,
    choiceCell: Function,
    clearSelect: Function,
    selectEmployee: Object,
    choiceState: Function,
    buttons: Array,
    showTime: Boolean,
    scheduleList: Array,
  },
  methods: {
    choiceDay(day, employee) {
      let current = day.format("YYYY-MM-DD");
      return this.scheduleList.find(
        (e) => current === e.date && e.employee.id === employee
      )?.date;
    },
    choiceColor(day, employee) {
      let currentDay = day.format("YYYY-MM-DD");
      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
      if (res !== "WORKS" && this.showTime) {
        return "var(--default-white)";
      }
      return this.buttons.find((e) => e.work === res)?.color;
    },
    choiceWorks(day, employee) {
      if (this.showTime) {
        return this.choiceTime(employee, day);
      }
      let currentDay = day.format("YYYY-MM-DD");
      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
      return this.buttons.find((e) => e.work === res)?.text[1];
    },
    choiceTime(schedule, day) {
      let currentDay = day.format("YYYY-MM-DD");
      let start = schedule.schedules.find(
        (e) => e.date === currentDay && e.status === "WORKS"
      )?.start_time;
      let end = schedule.schedules.find(
        (e) => e.date === currentDay && e.status === "WORKS"
      )?.end_time;
      if (start && end) return `${start} ${end}`;
    },
  },
};
</script>

<style lang="sass" scoped>
.schedule-wrapper
  overflow-y: scroll
  max-height: 351px
  border-bottom: 1.5px solid var(--border-light-grey-color-1)
  &::-webkit-scrollbar-track
    border-radius: 0

.edit
  border-right: 1.5px solid var(--border-light-grey-color-1)
  border-bottom: 1.5px solid var(--border-light-grey-color-1)
  border-left: 1.5px solid var(--border-light-grey-color-1)

.name-employee
  width: 25%
  border-right: 1.5px solid var(--border-light-grey-color-1)
  border-bottom: 1.5px solid var(--border-light-grey-color-1)
  color: var(--btn-blue-color)

.row
  width: calc(75% - 44px)

.cell
  border-right: 1.5px solid var(--border-light-grey-color-1)
  border-bottom: 1.5px solid var(--border-light-grey-color-1)
  &:hover
    background-color: var(--border-light-grey-color-1)
  &:last-child
    border-right: none

.cell-work
  display: none

.show-time
  text-align: center
  font-size: 12px

.set-date
  background-color: var(--btn-blue-color-4) !important

.status
  background-color: var(--bg-color-status) !important

.status::after
  content: var(--text-status)

.set-template
  background-color: var(--bg-event-orange-color) !important
</style>
