<template>
  <FormWrapper
    class="date-picker-wrapper date-picker"
    :class="states"
    :label="props.label"
    :error="props.error"
    :error-text="props.errorText"
    :success="props.success"
    :disabled="props.disabled"
    ref="focusElement"
  >
    <div
      class="wrapper"
      @focus="setActive(true)"
      @click="setActive(true)"
      tabindex="0"
      ref="wrapperPicker"
    >
      <input id="pikaday" />

      <div class="picker-input">
        <p class="h600 value" v-if="props.selectedDate">
          {{ props.selectedDate }}
        </p>
        <p class="h600 placeholder" v-else>{{ placeholder }}</p>
        <div class="icon calendar">
          <SpIcon
            name="sp-close"
            v-if="selectedDate"
            @click.stop="reset"
            class="close pointer"
          />
          <SpIcon name="sp-calendar" v-else />
        </div>
      </div>
      <AccordionSheet :active="active" @close="setActive(false)">
        <slot />
      </AccordionSheet>
    </div>
  </FormWrapper>
</template>

<script lang="ts">
import { useFocusOut } from "@/hooks";
import { defineComponent, watch } from "vue";
import FormMixin from "@/mixins/FormMixin";

export default defineComponent({
  mixins: [FormMixin],
  props: {
    selectedDate: {
      default: "",
      required: true,
      type: String,
    },
  },
  setup(props, { emit }) {
    const { focusOutElement, active, focusElement } = useFocusOut();
    focusOutElement.value = ".wrapper";

    const setActive = (status: boolean): void => {
      active.value = status;
    };

    const reset = (): void => {
      emit("reset");
    };

    watch(
      (): string => props.selectedDate,
      (): void => {
        setTimeout(() => {
          setActive(false);
        });
      }
    );

    return {
      setActive,
      reset,
      props,
      active,
      focusElement,
    };
  },
});
</script>

<style scoped lang="scss">
.wrapper {
  color: var(--text-color);
  pointer-events: var(--pointer-events);
  height: var(--height);
  width: 100%;
  outline: none;
  position: relative;
  .dropdown {
    overflow: unset !important;
  }

  input {
    visibility: hidden;
    display: none;
    pointer-events: none;
  }

  .accordion-wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--form-border-radius);
    background-color: var(--background);
    overflow: hidden;
    z-index: 2;
    min-width: 360px;

    &.up {
      top: auto;
      bottom: 100%;
    }
  }

  .picker-input {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 var(--form-side-padding);
    background-color: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--form-border-radius);
    box-shadow: var(--box-shadow);
    transition: 0.3s ease;
    cursor: pointer;

    .value {
      position: absolute;
      top: 20%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .placeholder {
      color: var(--form-placeholder-color);
      pointer-events: none;
    }

    .icon.calendar {
      position: absolute;
      right: var(--form-side-padding);
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
