<template>
  <pop ref="popRef" :on-close="onClose" :allowClose="false">
    <div v-show="mobileScheduled && isMobile" class="lofty-schedule-pop is-scheduled">
      <div class="title">Your Request was Received!<i class="lofty_iconfont lofty-icon-close" @click="close"></i>
      <div class="scheduled-desc">We'll be in touch to confirm our meeting</div>
      <div class="scheduled-date">{{formatDate(params.startTime)}}</div>
      <div class="scheduled-time">{{ dateFormat('hh:mmp', params.startTime) }} - {{ dateFormat('hh:mmp', params.endTime) }}</div>
      <div class="lofty-btn lofty-schedule-tour" @click="mobileScheduled = false">Schedule Again</div>
      </div>
    </div>
    <div v-show="!isScheduled && !mobileScheduled" class="lofty-schedule-pop">
      <div class="title">REQUEST A TOUR<i class="lofty_iconfont lofty-icon-close" @click="close"></i></div>
      <div class="lofty-tour-type-tab">
        <div class="tab-type" :class="{active: tourType === 'tour_info'}" @click="tourType='tour_info'">In-Person</div>
        <div class="tab-type" :class="{active: tourType === 'virtual_tour'}" @click="tourType='virtual_tour'">Virtual Tour</div>
      </div>
      <swiper-calendar class="lofty-swiper-calendar" :id="id" :slides-per-view="slidesPerView"></swiper-calendar>
      <div class="lofty-select-time">Start Time</div>
      <Dropdown hide-arrow :top="40" :menu-style="{padding: 0}" mobile-fix @toggle="startOpen=$event">
        <div class="lofty-dropdown-time" :class="{open: startOpen}">
          <i class="lofty_iconfont lofty-icon-time"></i>
          <span>{{ dateFormat('hh:mm p', startTime) }}</span>
          <i v-show="!startOpen" class="lofty_iconfont lofty-icon-arrow_01_down"></i>
          <i v-show="startOpen" class="lofty_iconfont lofty-icon-arrow_01_up"></i>
        </div>
        <template #menu>
          <ul class="lofty-time-list">
            <li v-for="item in startList" :class="{active: item === startTime}" class="time-item" @click="startTime = item">
              {{ dateFormat('hh:mm p', item) }}
            </li>
          </ul>
        </template>
      </Dropdown>
      <div class="lofty-select-time">End Time</div>
      <Dropdown hide-arrow :top="40" :menu-style="{padding: 0}" mobile-fix @toggle="endOpen=$event">
        <div class="lofty-dropdown-time" :class="{open: endOpen}">
          <i class="lofty_iconfont lofty-icon-time"></i>
          <span>{{ dateFormat('hh:mm p', endTime) }}</span>
          <i v-show="!endOpen" class="lofty_iconfont lofty-icon-arrow_01_down"></i>
          <i v-show="endOpen" class="lofty_iconfont lofty-icon-arrow_01_up"></i>
        </div>
        <template #menu>
          <ul class="lofty-time-list">
            <li v-for="item in endList" :class="{active: item === endTime}" class="time-item" @click="endTime = item">
              {{ dateFormat('hh:mm p', item) }}
            </li>
          </ul>
        </template>
      </Dropdown>
      <div class="lofty-btn lofty-schedule-tour" @click="submit">Schedule a Tour</div>
    </div>
  </pop>
</template>

<script setup>
import store from "../store.js";
import pop from '@/components/pop/index.vue';
import SwiperCalendar from './swiperCalendar.vue';
import Dropdown from '@/components/dropdown/index.vue';
import dateFormat from '@/common/format/date-format.js';
import { isMobile } from "@/util/index.js";
const popRef = useTemplateRef('popRef');
const { id, formatDate, isScheduled, onClose } = defineProps({ id: String, formatDate: Function, isScheduled: Boolean, onClose: Function });
const { tourType, dayIndex, dayList, listingId  } = store[id];
const [startTime, endTime, startList, endList] = [ref(0), ref(0), ref([]), ref([])]
const slidesPerView = isMobile ? 3 : 5
const params = computed(()=>{
  return {
    startTime: startTime.value,
    endTime: endTime.value,
    listingId
  }
})
const emits = defineEmits(['submit'])
function getStartTime() {
  if(dayIndex.value === 0) {  // 如果是今天
    startTime.value = getNearest15()
  } else {
    const date = dayList[dayIndex.value].date
    startTime.value = +date
  }
  startList.value = getTimeList(startTime.value)
}
function resetEndTime() {
  const [date1, date2] = [new Date(startTime.value), new Date(startTime.value)]
  date1.setMinutes(date1.getMinutes() + 15)
  date2.setMinutes(date2.getMinutes() + 30)
  endTime.value = +date1
  endList.value = [+date1]
  if(!isMidnight(date1)) {   // 如果date1不是半夜12点
    endList.value.push(+date2)
    endTime.value = +date2
  }
}
watch(dayIndex, getStartTime)
watch(startTime, resetEndTime)

function getTimeList(fromTime) {
  const res = []
  const endOfDay = (new Date(fromTime)).setHours(23, 59, 59, 999)
  let date = new Date(fromTime);
  while (date <= endOfDay) {
    res.push(+date)
    date.setMinutes(date.getMinutes() + 15)
  }
  return res
}
onMounted(()=>{
  getStartTime()
  popRef.value.open();
})

function getNearest15() {
  const now = new Date();
  now.setMinutes(Math.ceil(now.getMinutes() / 15) * 15); // 直接计算下一个 15 分钟点
  now.setSeconds(0); // 秒归零
  now.setMilliseconds(0); // 毫秒归零
  if (now.getMinutes() === 0) {
    now.setHours(now.getHours()); // 如果分钟为 0，说明是下一个小时
    now.setMinutes(0); // 设置分钟为 0
  }
  return +now;
}

function isMidnight(date) {
  return date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0 && date.getMilliseconds() === 0;
}

const mobileScheduled = ref(false)
function submit() {
    emits('submit', params.value)
    if(isMobile)  {
      mobileScheduled.value = true
    } else {
      close()
    }
}
function close() {
  popRef.value?.close()
}
const startOpen = ref(false)
const endOpen = ref(false)
</script>
<style lang="scss">
.lofty-schedule-pop {
  background: #fff;
  width: 610px;
  padding: 30px;
  position: relative;
  @include media-600 {
    width: 100vw;
    margin: 0 auto;
    padding: 15px;
  }
  .title {
    text-align: center;
    font-size: 20px;
    color: rgba(25, 25, 25, 1);
    font-family: var(--lofty-font-bold);
    .lofty-icon-close {
      position: absolute;
      right: 20px;
      top: 15px;
      cursor: pointer;
    }
  }
}
.lofty-select-time {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  font-family: var(--lofty-font-medium);
  color: rgba(80, 80, 80, 1);
}
.lofty-dropdown-time {
  border: solid 1px rgba(218, 218, 218, 0.5);
  height: 36px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  cursor: pointer;
  width: 100%;
  span {
    flex: 1;
  }
  .lofty-icon-time {
    color: rgba(168, 168, 168, 1);
    margin-right: 10px;
  }
  .lofty-icon-arrow_01_down, .lofty-icon-arrow_01_up{
    margin-right: 10px;
  }
}
.lofty-dropdown-time.open {
  border-color: #111;
}
.lofty-time-list {
  max-height: 200px;
  overflow: auto;
  @include media-600 {
    max-height: 80vh;
  }
  .time-item {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    @include media-600 {
      font-size: 16px;
      padding: 10px;
      border-top: solid 1px rgba(218, 218, 218, 0.5);
      border-left: solid 1px rgba(218, 218, 218, 0.5);
      border-right: solid 1px rgba(218, 218, 218, 0.5);
    }
    &:hover {
      background: rgba(17, 17, 17, 0.051);
    }
  }
  .active {
    background: rgba(17, 17, 17, 0.051);
  }
}
.lofty-schedule-tour {
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
}
</style>