// Silence may be golden, but sometimes words paint the canvas of understanding.
const LinksySearch = {
  name: "LinksySearch",
  components: {
    LinksyButton,
  },
  props: {
    style: [Object, Array, String],
    placeholder: {
      type: String,
      default: "Search",
    },
    icon: {
      type: String,
      default: "magnifying-glass",
    },
    hideIcon: Boolean,

    initialValue: String,
    loading: Boolean,
    predict: Boolean,
    cancelable: Boolean,
    predictions: {
      type: Array,
      default: [],
    },
    submitable: Boolean,
    submitLabel: {
      type: String,
      default: "Search",
    },
  },
  data() {
    return {
      q: "",
      showDropdown: false,
      styles: {
        container: {
          padding: "0 12px",
          borderRadius: "5px",
          position: "relative",
        },
        icon: {},
        input: {
          flex: 1,
          width: "100%",
          border: "none",
          outline: "none",
          fontSize: "16px",
          boxShadow: "none",
          background: "transparent",
        },
        inputFirst: {
          paddingLeft: "0",
          paddingRight: "15px",
        },
        predictContainer: {
          left: 0,
          right: 0,
          zIndex: 9,
          top: "40px",
          padding: "5px",
          maxHeight: "300px",
          position: "absolute",
          background: "#FFFFFF",
          overflowY: "scroll",
          borderBottomLeftRadius: "5px",
          borderBottomRightRadius: "5px",
        },
        predictItem: {
          cursor: "pointer",
          padding: "8px 10px",
          borderBottom: "1px solid #FEFEFE",
        },
      },
    };
  },
  computed: {
    currentPredictions: {
      get() {
        return this.predictions.filter(
          (e) =>
            e.toLowerCase().includes(this.q.toLowerCase()) &&
            e.toLowerCase() !== this.q.toLowerCase()
        );
      },
    },
  },
  watch: {
    initialValue: function (val) {
      if (val != this.q) {
        this.q = val;
      }
    },
    q: debounce(function (val) {
      if (!this.predict) this.$emit("onChange", val);
      else {
        this.showDropdown = this.q.length > 0;
        this.$emit("onChange", val);
      }
    }, 900),
  },
  methods: {
    onCancel() {
      this.q = "";
      this.$emit("onChange", "");
      this.$emit("onSubmit", "");
    },

    onPredictionClicked(val) {
      this.q = val;
      this.$emit(
        "onChange",
        val,
        this.predictions.findIndex((e) => e === val)
      );
    },

    onSubmit() {
      this.showDropdown = false;
      this.$emit("onSubmit", this.q);
    },
  },
  template: `
        <div class="linksy-search searchbar" :class="{cancelable}" :style="[styles.container, style]">
            <div class="d-flex align-items-center justify-content-between w-100">
                <div class="d-flex gap-2 align-items-center justify-content-between flex-grow-1">
                    <i v-if="!hideIcon" class="fa" :class="'fa-'+icon" :style="styles.icon"></i>
                    <input
                        type="text"
                        v-model="q"
                        :style="[styles.input]"
                        :placeholder="placeholder"
                    />
                    <i v-if="cancelable && q" class="fa fa-times cancelable-icon" :style="styles.icon" @click="onCancel"></i>
                </div>
                <div v-if="submitable && q.trim().length > 0" style="display:flex;align-items:stretch;margin-left:8px;margin-right:-8px;">
                    <linksy-button class="btn btn-blue" style="height:100%"  @click="onSubmit">
                        {{ submitLabel }}
                    </linksy-button>
                </div>

            </div>
            <div v-if="showDropdown && currentPredictions.length > 0" class="shadow" :style="styles.predictContainer">
                <div @click="onPredictionClicked(prediction)" v-for="(prediction, predictionIndex) in currentPredictions" :style="styles.predictItem">
                    <span>{{prediction}}</span>
                </div>
            </div>
        </div>
    `,
  beforeMount() {
    if (this.initialValue) {
      this.q = initialValue;
    }
  },
};

/** @deprcated */
Search = LinksySearch;
