<template>
  <div class="lofty-featuredListing-style" v-if="imgStyleConfigData">
    <div class="title">Style Settings</div>
    <div class="configs-wrap">
      <div class="config-name">featured listings style</div>

      <LayoutConfig v-model="currentImgType" :config="styleConfigs"/>

      <div class="config-style-content">
        <div
          class="config-style-tab-content"
          :class="config.type"
          v-for="config in imgStyleConfigData"
          :key="config.type"
          v-show="currentImgType === config.type"
        >
          <div
            class="config-item"
            v-for="item in config.items"
            :key="item.key"
            v-show="item.show !== false"
            :id="config.type + '-' + item.key"
          >
            <div class="config-item-name">{{ item.label }}</div>
            <div
              class="config-item-content"
              :class="{ row: item.inputType === 'radio' }"
            >
              <template v-if="item.inputType === 'text'">
                <input
                  :type="item.inputType"
                  v-model="item.value"
                  :maxlength="item.maxLength"
                />
              </template>
              <template v-if="item.inputType === 'number'">
                <InputNumber
                  v-model="item.value"
                  :min="item.min"
                  :max="item.max"
                  :step="item.step"
                />
              </template>
              <template v-if="item.inputType === 'radio'">
                <label v-for="(option, index) in item.options" :key="index">
                  <input
                    :type="item.inputType"
                    v-model="item.value"
                    :name="config.type + '_' + item.key"
                    :value="option.value"
                    @change="
                      item?.onChange?.({
                        configItems: config.items,
                        isShow: item.value,
                        callback: showConfigItem,
                      })
                    "
                  />
                  {{ option.label }}
                </label>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { isEqual } from "lodash-es";
import { ref, watch, nextTick, onBeforeMount } from "vue";
import LayoutConfig from "@/admin/common/Layout.vue"
import { styleConfigs, initConfigItems } from "./config.js";
import { findChanges } from "@/admin/utils.js";
import InputNumber from "@/admin/common/components/inputNumber.vue";

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

function showConfigItem({ configItems, isShow, effectKeys = [] }) {
  configItems.forEach((item) => {
    if (effectKeys.indexOf(item.key) >= 0) {
      item.show = isShow;
    }
  });
  if (isShow) {
    nextTick(() => {
      document
        .getElementById(currentImgType.value + "-" + effectKeys?.[0])
        ?.scrollIntoView({
          behavior: "smooth",
          block: "center",
        });
    });
  }
}

watch(
  () => props.config,
  () => {
    init();
  }
);

onBeforeMount(init);

const currentImgType = ref("");
const imgStyleConfigData = ref(null);
const oldConfigData = ref({});

watch(currentImgType, () => {
  updateData();
})
function init() {
  currentImgType.value = props.config.featuredListingStyle;
  const gridConfig = props.config.grid || {};
  const sliderConfig = props.config.slider || {};
  const galleryConfig = props.config.gallery || {};
  imgStyleConfigData.value = initConfigItems({
    gridConfig,
    sliderConfig,
    galleryConfig,
  });
  oldConfigData.value = formatConfigData();
}

function formatConfigData() {
  let configData = {
    featuredListingStyle: currentImgType.value,
  };
  imgStyleConfigData.value?.forEach((config) => {
    configData[config.type] = {};
    config.items.forEach((item) => {
      configData[config.type][item.key] = item.value;
    });
  });
  return configData;
}

const emit = defineEmits(["update"]);
watch(
  () => imgStyleConfigData.value,
  () => {
    updateData();
  },
  { deep: true }
);

function updateData() {
  const diffData = getDiffData();
  emit("update", diffData);
}

function getDiffData() {
  let obj = {};
  let newConfigData = formatConfigData();
  if (!isEqual(oldConfigData.value, newConfigData)) {
    obj = findChanges(oldConfigData.value, newConfigData);
  }
  return obj;
}

defineExpose({
  getCurrentConfig: formatConfigData,
});
</script>

<style lang="scss" scoped>
.lofty-featuredListing-style {
  border-top: 1px solid #f0f0f0;
  padding: 20px;
  .title {
    font-size: 14px;
    font-weight: bold;
    color: $gray-900;
  }
  .configs-wrap {
    margin-top: 20px;
    .config-name {
      font-size: 11px;
      color: $gray-800;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .config-style-tabs {
      margin-top: 10px;
      display: flex;
      gap: 30px;
      height: 150px;
      .config-style-tab {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: $radius-small;
        border: 1px solid #e0e0e0;
        position: relative;
        img {
          width: 100%;
          max-height: 100%;
          object-fit: cover;
        }
        &.active,
        &:hover {
          border-color: $color-theme;
        }
        .selected-mark {
          position: absolute;
          width: 36px;
          height: 36px;
          right: 0;
          top: 0;
          text-align: center;
          background-image: linear-gradient(
            to right top,
            transparent 50%,
            $color-theme 50%
          );
          i {
            position: absolute;
            bottom: 20px;
            right: 4px;
            font-size: 12px;
            line-height: 1;
            color: #fff;
          }
        }
      }
    }
    .config-style-content {
      margin-top: 20px;
      .config-style-tab-content {
        .config-item {
          display: flex;
          flex-direction: column;
          gap: 10px;
          &:not(:first-child) {
            margin-top: 20px;
          }
          .config-item-name {
            font-size: 11px;
            color: $gray-800;
            font-weight: 500;
            text-transform: uppercase;
          }
          .config-item-content {
            &.row {
              display: flex;
              align-items: center;
              gap: 30px;
            }
            label {
              color: $gray-800;
            }
          }
        }
      }
    }
  }
}
</style>
