<template>
  <DatePickerWrapper
    class="date-picker-standard"
    :selected-date="state.selectedDate"
    :placeholder="props.placeholder"
    :label="props.label"
    :error="props.error"
    :error-text="props.errorText"
    ref="wrapper"
    @reset="reset"
  >
    <div class="picker-container"></div>
  </DatePickerWrapper>
</template>
<script lang="ts">
import {
  defineComponent,
  onBeforeUnmount,
  onMounted,
  reactive,
  watch,
  nextTick,
  ref,
} from "vue";
import FormMixin from "@/mixins/FormMixin";
import { useI18n } from "vue-i18n";
import moment from "moment";
import Pikaday from "pikaday";

export default defineComponent({
  mixins: [FormMixin],
  props: {
    minDate: {
      default: null,
      type: Date,
    },
    maxDate: {
      type: Date,
      default: () => new Date(),
    },
    usePropFormatings: {
      default: false,
      type: Boolean,
    },

    format: {
      type: String,
      default: "DD / MMMM / YYYY",
    },
    valueFormat: {
      type: String,
      default: "DD/MM/YYYY",
    },
    disableWeekends: {
      default: false,
      type: Boolean,
    },
  },
  setup(props: any, { emit }) {
    const { t } = useI18n();
    const state = reactive<{
      selectedDate: string;
      selectedYear: number;
      selectedMonth: number;
      pikaday: any;
    }>({
      selectedDate: "",
      selectedYear: 0,
      selectedMonth: 0,
      pikaday: null,
    });
    const wrapper = ref(null) as any;

    onMounted((): void => {
      if (props.value) {
        if (props.usePropFormatings) {
          const m = moment(props.value, props.valueFormat);
          state.selectedDate = m.format(props.format);
        } else {
          state.selectedDate = props.value;
        }
      }

      nextTick(() => {
        initPikaday();
      });
      const date = new Date();
      state.selectedYear = date.getFullYear();
      state.selectedMonth = date.getMonth();
    });
    onBeforeUnmount((): void => {
      destroyPikaday();
    });

    const initPikaday = (): void => {
      const field = wrapper.value.$el.querySelector(
        "#pikaday"
      ) as HTMLInputElement;
      const container = wrapper.value.$el.querySelector(
        ".picker-container"
      ) as HTMLElement;
      const months: string[] = [];
      const weekdays: string[] = [];
      const weekdaysShort: string[] = [];

      for (let i = 1; i <= 6; i++) {
        weekdays.push(t(`dates.week_long_${i}`) as string);
        weekdaysShort.push(t(`dates.week_short_${i}`) as string);
      }
      weekdays.unshift(t(`dates.week_long_7`) as string);
      weekdaysShort.unshift(t(`dates.week_short_7`) as string);

      for (let i = 1; i <= 12; i++) {
        months.push(t(`dates.month_long_${i}`) as string);
      }

      const nextMonth = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.70657 4.2928C8.31618 3.9024 7.68321 3.9024 7.29281 4.2928C6.90242 4.6832 6.90242 5.31616 7.29281 5.70656L13.5862 12L7.29282 18.2934C6.90242 18.6838 6.90242 19.3168 7.29281 19.7072C7.68321 20.0976 8.31618 20.0976 8.70657 19.7072L15.6468 12.7669C15.6683 12.7488 15.6892 12.7296 15.7094 12.7094C15.9052 12.5135 16.0028 12.2567 16.0022 12C16.0028 11.7433 15.9052 11.4864 15.7094 11.2906C15.6892 11.2704 15.6683 11.2512 15.6468 11.233L8.70657 4.2928Z" fill="#AEAEB2"/>
      </svg>`;
      const previousMonth = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2956 4.2928C14.686 3.9024 15.319 3.9024 15.7094 4.2928C16.0998 4.6832 16.0998 5.31616 15.7094 5.70656L9.41597 12L15.7094 18.2934C16.0998 18.6838 16.0998 19.3168 15.7094 19.7072C15.319 20.0976 14.686 20.0976 14.2956 19.7072L7.3554 12.7669C7.33393 12.7488 7.31305 12.7296 7.29282 12.7094C7.09698 12.5135 6.99938 12.2567 7.00002 12C6.99937 11.7433 7.09697 11.4864 7.29282 11.2906C7.31305 11.2704 7.33394 11.2512 7.35541 11.233L14.2956 4.2928Z" fill="#AEAEB2"/>
      </svg>`;

      state.pikaday = new Pikaday({
        field: field,
        container: container,
        bound: false,
        minDate: props.minDate,
        maxDate: props.maxDate,
        disableWeekends: props.disableWeekends,
        keyboardInput: false,
        i18n: {
          previousMonth,
          nextMonth,
          months,
          weekdays,
          weekdaysShort,
        },
        onSelect: (date: Date): void => {
          const m = moment(date);
          state.selectedDate = m.format(props.format);
          emit("input", m.format(props.valueFormat));
        },
      });
    };

    const reset = (): void => {
      state.selectedDate = "";
      emit("input", null);
    };

    const destroyPikaday = (): void => {
      state.pikaday.destroy();
    };

    watch(
      (): any => props.value,
      (newVal: string): void => {
        if (newVal && props.usePropFormatings) {
          const m = moment(props.value, props.valueFormat);
          state.selectedDate = m.format(props.format);
        } else {
          state.selectedDate = newVal;
        }
      }
    );

    return {
      props,
      reset,
      state,
      wrapper,
    };
  },
});
</script>

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

  .pika-single {
    --day-button-size: 32px;
    padding: 16px 0;
    min-height: 382px;

    .pika-lendar {
      .pika-title {
        display: flex !important;
        margin-top: 0;
        margin-bottom: 24px;
        height: auto;

        .pika-next,
        .pika-prev {
          width: auto;
          height: auto;
          padding: 0;

          svg {
            pointer-events: none;

            path {
              transition: fill 0.3s ease;
            }
          }

          &:after {
            content: initial !important;
          }

          &:hover {
            path {
              fill: var(--blue);
            }
          }
        }
      }

      .pika-table {
        thead {
          tr {
            padding: 0;

            th {
              width: var(--day-button-size);
            }
          }
        }

        tbody {
          tr {
            &:not(:last-child) {
              td {
                margin-bottom: 12px;
              }
            }

            td {
              border: 1px solid var(--grey-5);
              border-radius: 6px;
              transition: border-color 0.3s ease;

              &:after {
                content: initial;
              }

              &.is-empty {
                border: none !important;
              }

              &.is-selected {
                color: var(--blue);
                border-color: var(--blue);
              }

              &.is-disabled {
                color: var(--text-color-tertiary);
                border-color: var(--text-color-tertiary);
              }
            }
          }
        }
      }
    }
  }

  @include screen-md() {
    .pika-single {
      --day-button-size: 30px;

      padding: 32px 24px 24px;
      min-height: 420px;

      .pika-lendar {
        .pika-table {
          tbody {
            tr {
              &:not(:last-child) {
                td {
                  margin-bottom: 12px;
                }
              }
            }
          }
        }
      }
    }
  }

  @include screen-lg() {
    .pika-single {
      --day-button-size: 32px;
      min-height: 430px;
    }
  }
}
</style>
