<script setup>
import SearchBox from "./SearchBox.vue";
import { evaluateDependsOnValue, inList } from "../utils";
import { ref, computed } from "vue";
import { useFormBuilderStore, LAYOUT_FIELDS, NO_VALUE_TYPES } from "../store";
import { Icon } from '@iconify/vue';
import { t } from '@/shared/i18n';

let store = useFormBuilderStore();

let searchText = ref("");

let pagefieldDf = computed(() => {
  let fields = store.getPagefields.map(df => ({...df})).filter((df) => {
    if (inList(LAYOUT_FIELDS, df.fieldtype) || df.hidden) {
      return false;
    }
    if (
      df.depends_on &&
      !evaluateDependsOnValue(df.depends_on, store.form.selected_field, store.pg)
    ) {
      return false;
    }

    if (
      inList(["fetch_from", "fetch_if_empty"], df.fieldname) &&
      inList(NO_VALUE_TYPES, store.form.selected_field.fieldtype)
    ) {
      return false;
    }

    if (df.fieldname === "reqd" && store.form.selected_field.fieldtype === "Check") {
      return false;
    }

    if (df.fieldname === "options") {
      df.fieldtype = "Small Text";
      df.options = "";

      if (inList(["Table", "Link"], store.form.selected_field.fieldtype)) {
        df.fieldtype = "Data";
      }
    }

    // show link_filters pagefield only when link field is selected
    if (df.fieldname === "link_filters" && store.form.selected_field.fieldtype !== "Link") {
      return false;
    }

    if (searchText.value) {
      if (
        df.label.toLowerCase().includes(searchText.value.toLowerCase()) ||
        df.fieldname.toLowerCase().includes(searchText.value.toLowerCase())
      ) {
        return true;
      }
      return false;
    }
    return true;
  });
  return [...fields];
});

function getControlComponent(fieldtype) {
  return fieldtype.replaceAll(' ', '') + 'Control';
}
</script>

<template>
  <div class="field-properties">
    <div class="header">
      <SearchBox class="flex-1" v-model="searchText" />
      <button
        class="close-btn btn btn-xs"
        :title="t('Close properties')"
        @click="store.form.selected_field = null"
      >
        <Icon icon="mdi:close" class="icon-sm" />
      </button>
    </div>
    <div class="control-data">
      <div v-if="store.form.selected_field">
        <div class="field" v-for="(df, i) in pagefieldDf" :key="i">
          <component
            :is="getControlComponent(df.fieldtype)"
            :df="df"
            :read_only="store.readOnly"
            :value="store.form.selected_field[df.fieldname]"
            v-model="store.form.selected_field[df.fieldname]"
            :data-fieldname="df.fieldname"
            :data-fieldtype="df.fieldtype"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.field-properties {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  display: flex;
  padding: 8px;
  border-bottom: 1px solid #e5e7eb;
  gap: 8px;

  .close-btn {
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    
    &:hover {
      background-color: #f3f4f6;
      border-radius: 4px;
    }
  }
}

.control-data {
  flex: 1;
  overflow-y: auto;
  padding: 12px;

  .field {
    margin-bottom: 1rem;

    :deep(.form-control:disabled) {
      color: #9ca3af;
      background-color: #f9fafb;
      cursor: default;
    }
  }
}

.icon-sm {
  width: 14px;
  height: 14px;
}

.flex-1 {
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  font-size: 12px;
  
  &:hover {
    background-color: #f9fafb;
  }
  
  &.btn-xs {
    padding: 4px;
    font-size: 12px;
  }
}
</style>
