<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import { toRefs, ref } from 'vue'
import {
  LabelControl,
  Tooltip,
} from './index'
import {
  purifyHtml,
  getI18n,
} from '@/helper'
import { useSettingsStore } from '@/stores/settings-store'
import { storeToRefs } from 'pinia'

const props = defineProps({
  params: {
    type: Object,
    required: true,
  },
})
const { params } = toRefs(props)
const settingsStore = useSettingsStore()
const {
  showPopup,
  componentUpgrade,
} = storeToRefs(settingsStore)

const arg = params.value
const options = ref<any>(arg['options'])
const links = ref<any>(arg['links'])
const default_value = ref<any>(arg['default'])
const selected_value = ref<any>(default_value.value)

const disable = ref<boolean>(arg['disabled'] ?? false)
const emit = defineEmits(['input', 'fieldData'])
const inputValues = ref<any>([])

// For custom field.
const with_condition = ref<boolean>(arg['with_text_condition'] ?? false)
const display_text = ref<boolean>(!!(arg['custom_link'] ?? false))
const custom_link = ref<string>(arg['custom_link'] != '' ? arg['custom_link'] : '')

// Set for default value.
if (selected_value.value !== '' && !disable.value) {
  let link_value = selected_value.value
  if ( selected_value.value == 'custom' ) {
    link_value = custom_link.value
  }
  inputValues.value[arg['id']] = link_value

  emit('fieldData', inputValues.value)
}

const emitValueChange = (value: any) => {
  if (typeof arg['pro'] !== 'undefined' && arg['pro'] !== null) {
    if (typeof arg['pro_on_active'] !== 'undefined' && arg['pro_on_active'] !== null) {
      if ( arg['pro_on_active'] && selected_value.value !== '' ) {
        showPopup.value = true
        selected_value.value = ''
      }
    } else {
      showPopup.value = true
      selected_value.value = default_value.value
    }
    
    componentUpgrade.value = arg['pro']
  } else {
    if (value == 'custom') {
      display_text.value = true
      inputValues.value[arg['id']] = custom_link.value
    } else {
      display_text.value = false
      inputValues.value[arg['id']] = value
    }
    emit('fieldData', inputValues.value)
  }
}

const emitInputValueChange = () => {
  inputValues.value[arg['id']] = custom_link.value
  emit('fieldData', inputValues.value)
}
</script>

<template>
  <div>
    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-mb-2 stwlite-tw-gap-2">
      <LabelControl :params="arg" />
    </div>
    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-mb-2 stwlite-tw-gap-2">
      <select
        v-model="selected_value"
        @change="emitValueChange"
        :disabled="disable"
        class="stwlite-tw-block stwlite-tw-w-full stwlite-tw-max-w-xs stwlite-tw-rounded-md stwlite-tw-border-gray-300 stwlite-tw-shadow-sm focus:stwlite-tw-border-blue-500 focus:stwlite-tw-ring-blue-500 stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border"
      >
        <option v-for="(option, optionkey) in options" :key="optionkey" :value="optionkey">
          {{ option }}
        </option>
      </select>
      <Tooltip :params="arg" />
    </div>
    <div
      v-if="!display_text"
    >
      <a
        :href="links[selected_value]"
        target="_blank"
      >{{ getI18n('viewPageText', __('View Page', 'saveto-wishlist-lite-for-woocommerce')) }}</a>
    </div>
    <div 
      v-if="with_condition && display_text"
    >
      <input
        v-model="custom_link"
        :placeholder="arg['placeholder']"
        :name="arg['id']"
        @input="emitInputValueChange"
      />
    </div>
    <p v-if="arg['description'] !== 'undefined'" class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mt-2" v-html="purifyHtml(arg?.['description'] ?? '')" />
  </div>
</template>

<style scoped lang="scss">
select {
  max-width: 20rem;
  font-size: 16px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-color: rgb(209, 213, 219);
  border-radius: 0.375rem;
}
</style>