<template>
  <PageLayout title="Sold Listings" description="Generate and configure the shortcode of sold listings 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">
      <div class="form-group">
        <label>LAYOUT</label>
        <LayoutConfig v-model="layout" />
      </div>
      <MetaTags class="listing-groups" ref="metaTags" v-model="metaTagHtml" isShortCode/>
      <ListingFilter class="filters-wrap" :is-sold="true" @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 "@/admin/shortcodes/common.js";
const { copyCode, copied } = useCopy()

const layout = ref('map-grid')
const allConditions = ref([])
provide('allConditions', allConditions)
provide('listingFilterExcludeFields', ref(['listingStatus']))
provide('listingFilterLabelMap', ref({
  price: 'Sold Price'
}))

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_sold_listing][[${JSON.stringify(data, null, 2)}]][/lofty_idx_sold_listing]`
  copyCode(shortcode);
  saveShortCodeLog(types.SoldListings, shortcode);
}
</script>

<style lang="scss" scoped>
.form-groups {
  padding: 22px 20px 20px;
}
.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;
  }
}

.filters-wrap {
  margin-top: 20px;
  border-top: none;
  padding: 0 0 30px;
}
</style>