<template>
  <FormWrapper class="day-picker-wrapper" v-bind="formProps" ref="focusElement">
    <div class="picker-input-wrapper" tabindex="0" @click="setActive(true)">
      <div class="picker-input">
        <input @focus="inputFocus($event)" />
        <p class="h600 value" v-if="selectedDay">{{ selectedDay }}</p>
        <p class="h600 placeholder" v-else>{{ placeholder }}</p>
        <div class="icon calendar">
          <SpIcon name="calendar" />
        </div>
      </div>
    </div>

    <AccordionSheet :active="active" @close="setActive(false)">
      <slot />
    </AccordionSheet>
  </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: {
    selectedDay: {
      required: true,
      default: 0,
      type: Number,
    },
  },
  setup(props) {
    const { focusOutElement, active, focusElement } = useFocusOut();
    focusOutElement.value = ".picker-input-wrapper";

    const setActive = (status: boolean): void => {
      active.value = status;
    };
    const inputFocus = (event: Event): void => {
      (event.target as HTMLInputElement).blur();
      setActive(true);
    };

    watch(
      (): number => props.selectedDay,
      (): void => {
        setActive(false);
      }
    );
    return {
      setActive,
      inputFocus,
      props,
      active,
      focusElement,
    };
  },
});
</script>

<style lang="scss">
.day-picker-wrapper {
  @include desktop-1440max() {
    --min-width: 316px;
  }

  .picker-input-wrapper {
    color: var(--text-color);
    pointer-events: var(--pointer-events);
    height: var(--height);
    width: 100%;
    outline: none;
    position: relative;

    &:focus {
      .picker-input {
        border-color: var(--blue);
      }
    }

    input {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      width: 0;
      height: 0;
      overflow: hidden;
      background-color: transparent;
    }

    .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;

      .value {
        position: absolute;
        top: 50%;
        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>
