<template>
  <PageLayout title="Search" description="Generate and configure the shortcode of search page, then create a new WordPress page and insert the shortcode into it.">
    <template #button>
      <span v-if="copied">Copied!</span>
      <button v-else class="btn-save" @click.prevent="onCopy">Copy to clipboard</button>
    </template>
    <div class="form-groups">
      <MetaTags class="listing-groups" ref="metaTags" v-model="metaTagHtml" isShortCode/>
      <div class="form-group mt20">
        <label>LAYOUT</label>
        <LayoutConfig v-model="layout" />
      </div>
      <ListingFilter class="search-page-filter" @ready="dateFields=$event" ref="listingRef" />
    </div>
  </PageLayout>
</template>

<script setup>
import { ref, provide, useTemplateRef} from 'vue'
import ListingFilter from '@/admin/common/ListingFilter.vue';
import PageLayout from "@/admin/common/PageLayout.vue";
import LayoutConfig from "@/admin/common/Layout.vue"
import MetaTags from "@/admin/common/MetaTags.vue";
import { useCopy } from '@/hooks/useCopy.js';
import {formatShortConditions, saveShortCodeLog, types} from '../common.js';
const { copyCode, copied } = useCopy();

// search config
const layout = ref('map-grid')
const allConditions = ref([])
provide('allConditions', allConditions)

// page-config
const metaTagHtml = ref('')
const metaTagsRef = useTemplateRef('metaTags')
const listingFilter = useTemplateRef('listingRef');
let dateFields = []
function onCopy(){
  const data = {
    layout: layout.value,
    meta: metaTagsRef.value.getValueString(),
    conditions: formatShortConditions(allConditions.value, dateFields),
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    sort: listingFilter.value.sortCondition
  }
  const shortcode=`[lofty_idx_listing_page][[${JSON.stringify(data, null, 2)}]][/lofty_idx_listing_page]`
  copyCode(shortcode);
  saveShortCodeLog(types.Search, shortcode);
}
</script>

<style lang="scss" scoped>
.form-groups {
  padding: 22px 20px 20px;
}
.search-page-filter {
  padding-left: 0;
}
.form-group {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  margin-bottom: 20px;
  input {
    width: max-content;
  }

  label {
    width: 100px;
    font-weight: 500;
    font-size: 11px;
    color: $gray-800;
  }
}

</style>