<template lang="pug">
  .sidebar-wrapper.flex.flex-col.gap-y-1
    .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
      q-btn.rotate-180(
        @click="openSidebar",
        dense,
        padding="8px",
        style="color: var(--font-grey-color); background: var(--bg-light-grey)"
      )
        img(:src="arrow")
    .form.flex.p-4
      q-btn(
        color="primary",
        size="16px",
        label="Создать запись",
        @click="createForm",
        no-caps,
        icon="add",
        :style="{width: '100%', height: '40px'}",
        padding="0"
      )
    .flex.flex-col.gap-y-1
      q-expansion-item.expansion.font-bold.text-xm(
        v-for="(elem, index) in patientList",
        expand-separator,
        :label="elem.label",
        @click="choiceForm(elem.choice, index)",
        :class="{'patient': elem.label === 'Пациенты'}"
      )
        .select.flex.flex-col.font-medium.text-smm.px-4(
          v-if="elem.label !== 'Пациенты'",
          v-for="item in elem.data"
        )
          .status.flex.items-center.gap-x-1.px-2
            img(:src="item.icon")
            span {{item.name}}
        .flex.flex-col.p-4.pb-0(:class="choiceState()", v-else)
          .flex.h-8.w-full.items-center.justify-between
            base-input(
              v-model="foundPerson",
              debounce="10",
              @keyup.enter="searchPerson",
              @input="searchPerson",
              id="input",
              placeholder="Найти пациента...",
              outlined,
              :width="160",
              iconLeft,
              fontSize="12px",
              lineHeight="16px",
              textColor="var(--font-grey-color)"
            )
              q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
            q-btn.btn.ml-2(
              @click="sortPerson(elem.data)",
              style="color: var(--font-grey-color); background: var(--bg-light-grey)"
              :style="{width: '32px', height: '32px'}",
              padding="0"
            )
              img(:src="sort_word")
          .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
            @click="checkAll(elem.data)"
          )
            span Все
            img(v-if="selectAll(elem.data)", :src="icon_ok")
          .person-wrapper.flex.flex-col
            .person.items-center.flex.justify-between.py-2.cursor-pointer(
              v-for="(person, index) in choiceData(elem.data)",
              @click="checkPerson(index, elem.data)"
            )
              .flex.items-center.gap-x-2
                img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
                .flex.flex-col.font-medium
                  .text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
                  .text.text-xsx {{person.birthday}}
              img.h-6.w-6(v-if="person.check", :src="icon_ok")
</template>

<script>
import arrow from "@/assets/icons/double_left_arrow.svg";
import icon_ok from "@/assets/icons/icon_ok.svg";
import sort_word from "@/assets/icons/sort_word.svg";
import BaseInput from "@/components/base/BaseInput.vue";
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";

export default {
  name: "CalendarOpenSidebar",
  props: { openSidebar: Function, createForm: Function },
  components: { BaseInput },
  data() {
    return {
      val: [],
      arrow,
      icon_ok,
      sort_word,
      foundPerson: "",
      sortData: [],
      patientList: patientList,
      sort: false,
    };
  },
  methods: {
    choiceState() {
      let num = 0;
      let isPrimary = false;
      this.patientList.forEach((e) => {
        if (e.choice) num += 1;
        if (e.choice && e.id === 1) isPrimary = true;
      });
      return {
        "primary-form": num === 2 && isPrimary,
        "one-form": num === 1,
        "two-form": num === 2,
        "all-form": num === 3,
        default: !num,
      };
    },
    choiceForm(choice, idx) {
      if (choice)
        return (this.patientList.find((e) => e.id === idx).choice = false);
      this.patientList.find((e) => e.id === idx).choice = true;
    },
    trimOwnerName(lastName, firstName, patronymic) {
      let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
      let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
      return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
    },
    checkPerson(index, arr) {
      arr.map((e) => {
        if (e.id === index) e.check = !e.check;
      });
    },
    selectAll(arr) {
      return arr.find((e) => e.check) ? false : true;
    },
    checkAll(arr) {
      arr.map((e) => (e.check = false));
    },
    searchPerson() {
      this.sortData = this.patientList
        .find((e) => e.label === "Пациенты")
        .data.filter(
          (e) =>
            e.last_name.toLowerCase().substr(0, this.foundPerson.length) ===
            this.foundPerson.toLowerCase()
        );
    },
    choiceData(arr) {
      return this.foundPerson ? this.sortData : arr;
    },
    sortPerson(arr) {
      if (!this.sort) {
        this.sort = true;
        arr.sort((a, b) => (a.last_name > b.last_name ? 1 : -1));
      } else {
        this.sort = false;
        arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
      }
    },
  },
};
</script>

<style lang="sass" scoped>
.sidebar-wrapper
  width: 232px

.form
  background: var(--default-white)
  width: 100%
  height: 72px

.expansion
  height: 54px
  background: var(--default-white)
  border-radius: 4px
  color: var(--font-dark-blue-color)

.select
  padding-bottom: 2px
  &:last-child
    padding-bottom: 16px

.status
  border-radius: 4px
  height: 28px
  &:hover
    background: var(--bg-light-grey)
    cursor: pointer

.q-expansion-item
  border-radius: 0
  height: 100%

.q-expansion-item :deep(.q-separator)
  display: none

.patient :deep(.q-expansion-item__content)
  padding-bottom: 0px

.btn
  background-color: var(--bg-light-grey)
  color: var(--font-grey-color)

#input :deep(.q-field__control)
  height: 32px
  .q-field__prepend
    height: 32px

.q-expansion-item :deep(.q-item__section--main ~ .q-item__section--side)
  padding-left: 0px

.q-expansion-item :deep(.q-item__label)
  line-height: 135% !important

.q-expansion-item :deep(.q-item)
  padding: 10px 16px !important
  min-height: 54px

.text
  color: var(--font-grey-color)

.q-expansion-item :deep(.q-item)
  height: 54px

.person-wrapper
  overflow-y: auto
  margin-right: -10px
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track:vertical
    margin-top: -26px
    margin-bottom: 26px

.person
  height: 56px
  width: calc(100% - 10px)
  border-bottom: 1px solid var(--bg-light-grey)
  &:first-child
    border-top: 1px solid var(--bg-light-grey)

.one-form
  max-height: calc(100vh - 394px)
  transition: all 0.2s ease-in

.two-form
  max-height: calc(100vh - 528px)
  transition: all 0.2s ease-in

.all-form
  max-height: calc(100vh - 632px)
  transition: all 0.2s ease-in

.primary-form
  max-height: calc(100vh - 498px)
  transition: all 0.2s ease-in

.default
  max-height: 0px
  transition: all 0.5s ease-in
</style>
