<script setup lang="ts">
const props = defineProps<{
  modelValue: any[]
  disabled?: boolean
}>()

const emits = defineEmits(['update:modelValue'])

const vModel = useVModel(props, 'modelValue', emits)

const addParamRow = () =>
  vModel.value.push({
    enabled: false,
    name: '',
    value: '',
  })

const deleteParamRow = (i: number) => {
  if (vModel.value.length === 1) return

  vModel.value.splice(i, 1)
}
</script>

<template>
  <div class="flex flex-col py-3 gap-1.5 w-full">
    <div v-for="(paramRow, idx) in vModel" :key="idx" class="flex relative items-center w-full">
      <a-form-item class="form-item w-8">
        <NcCheckbox v-model:checked="paramRow.enabled" size="large" :disabled="disabled" />
      </a-form-item>
      <a-form-item class="form-item w-3/6">
        <a-input
          v-model:value="paramRow.name"
          :disabled="disabled"
          :placeholder="$t('placeholder.key')"
          class="!rounded-l-lg !border-nc-border-gray-medium"
        />
      </a-form-item>
      <a-form-item class="form-item w-3/6">
        <a-input
          v-model:value="paramRow.value"
          :disabled="disabled"
          :placeholder="$t('placeholder.value')"
          class="nc-webhook-parameters-value-input !border-x-0 !border-nc-border-gray-medium !rounded-none"
        />
      </a-form-item>

      <NcButton
        class="!rounded-l-none delete-btn !border-nc-border-gray-medium !shadow-none"
        type="secondary"
        size="small"
        :disabled="vModel.length === 1 || disabled"
        @click="deleteParamRow(idx)"
      >
        <component :is="iconMap.deleteListItem" />
      </NcButton>
    </div>

    <div class="mt-1.5">
      <NcButton size="small" type="secondary" class="nc-btn-focus" :disabled="disabled" @click="addParamRow">
        <div class="flex flex-row items-center gap-x-2">
          <component :is="iconMap.plus" class="flex-none" />
          <div data-rec="true">{{ $t('general.add') }}</div>
        </div>
      </NcButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ant-input {
  box-shadow: none !important;

  &:hover:not(:disabled) {
    @apply !hover:bg-nc-bg-gray-extralight;
  }
}

.delete-btn:not([disabled]) {
  @apply !text-nc-content-gray-muted;
}

:deep(.ant-input) {
  @apply !placeholder-nc-content-gray-muted;
}

:deep(.ant-input.nc-webhook-parameters-value-input) {
  @apply !border-x-0;
}

.ant-input-affix-wrapper {
  @apply px-4 rounded-lg py-2 w-84 border-1 focus:border-nc-border-brand border-nc-border-gray-medium !ring-0;
}

.nc-btn-focus:focus {
  @apply !text-nc-content-brand !shadow-none;
}
</style>
