<template>
  <DayPickerWrapper
    class="day-picker"
    :class="{ disabled }"
    :selectedDay="selectedDay"
    :placeholder="placeholder"
    :label="label"
    :error="error"
    ref="wrapper"
  >
    <div class="days-calendar-grid">
      <div
        v-for="day in 31"
        :key="day"
        class="h700"
        :class="{
          disabled: day > props.maxDay || day < props.minDay,
          active: day === value,
        }"
        @click="selectDay(day)"
      >
        {{ day }}
      </div>
    </div>
  </DayPickerWrapper>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import FormMixin from "@/mixins/FormMixin";
export default defineComponent({
  mixins: [FormMixin],
  props: {
    minDay: {
      default: 1,
      type: Number,
    },
    maxDay: {
      default: 25,
      type: Number,
    },
  },
  setup(props: any, { emit }) {
    const selectedDay = ref<number>(0);
    const wrapper = ref<any>(null);

    const selectDay = (day: string): void => {
      selectedDay.value = Number(day);
      emit("input", day);
    };

    onMounted((): void => {
      selectedDay.value = props.value ? props.value : 0;
    });

    return {
      selectedDay,
      wrapper,
      selectDay,
      props,
    };
  },
});
</script>

<style scoped lang="scss">
.day-picker {
  --accordion-min-width: 358px;

  .days-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, min-content);
    padding: 12px 0;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    width: 100%;
    justify-content: space-between;

    & > div {
      text-align: center;
      width: 36px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      transition: 0.3s ease;
      position: relative;
      cursor: pointer;

      &:after {
        content: "";
        width: 100%;
        height: 100%;
        background-color: var(--blue-10);
        border-radius: 50%;
        transform: scale(0);
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.3s;
        pointer-events: none;
        z-index: 0;
      }

      &:hover {
        color: var(--blue);

        &:after {
          transform: scale(1);
          opacity: 1;
        }
      }

      &.disabled {
        color: var(--text-color-secondary);
        pointer-events: none;
      }

      &.active {
        color: var(--blue);
        background-color: var(--blue-10);
      }
    }

    @include screen-md() {
      padding: 20px;

      & > div {
        width: 42px;
        height: 42px;
      }
    }
  }
}
</style>
