<template>
  <table
    id="table-input-with-options"
    class="demo-table"
  >
    <tbody>
      <tr
        v-for="({ label, props, rules, optionTextSuffixContent }, index) in formItems"
        :key="index"
      >
        <td>
          <ElForm :model="{ model }">
            <ElFormItem
              v-bind="{
                label,
                prop: `model.${index}`,
                rules
              }"
            >
              <TfInputWithOptions
                v-model="model[index]"
                v-bind="{
                  ...props,
                  prop: `model.${index}`,
                  saving: props.suffixClickable && suffixSaving,
                }"
                @suffixClick="suffixClick()"
              >
                <template #disabledOptionTextSuffix>
                  {{ optionTextSuffixContent }}
                </template>
              </TfInputWithOptions>
            </ElFormItem>
            <div class="prop-examples">
              <code><pre>{{ props }}</pre></code>
            </div>
          </ElForm>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
  // Forcing a build by changing a file 03.19.2024
  // Components
  const options = [
    { normalized_value: 'Normalized Value 1' },
    { normalized_value: 'Normalized Value 2' },
    { normalized_value: 'Normalized Value 3' },
  ];

  export default {
    data: () => ({
      formItems: [
        {
          label: 'With empty options',
          props: {
            options: [],
          },
        },
        {
          label: 'Auto Collapse',
          options,
          props: { options },
        },
        {
          label: 'Auto Collapse - tooltip',
          options,
          props: {
            tooltip: 'I have a tooltip.',
            options,
          },
        },
        {
          label: 'Auto Collapse - validation on blur',
          options,
          props: { options },
          rules: {
            message: 'This is a required field',
            required: true,
            trigger: 'blur',
          },
        },
        {
          label: 'Auto Collapse - allowEnter is false',
          props: {
            allowEnter: false,
            options,
          },
        },
        {
          label: 'Always Open - Is Annotate',
          props: {
            autoCollapse: false,
            options,
          },
        },
        {
          label: 'Auto Collapse - Suffix click',
          props: {
            options,
            suffixClickable: 'plus',
            saving: false,
          },
        },
        {
          label: 'Auto Collapse - custom keys/labels',
          props: {
            allowEnter: false,
            options: [
              { label: 'Match In-Force', normalized_value: '8 people' },
              { normalized_value: '10 people' },
              { normalized_value: '20 people' },
              { normalized_value: '30 people' },
            ],
            optionLabel: 'label',
          },
        },
        {
          label: 'Auto Collapse - Prepend',
          props: {
            options,
            prependValidationType: true,
            validationType: 'dollar',
          },
        },
        {
          label: 'Auto Collapse - Append - validationType',
          props: {
            allowEnter: false,
            appendValidationType: true,
            options: [
              { normalized_value: '10%' },
              { normalized_value: '20%' },
              { normalized_value: '30%' },
            ],
            validationType: 'percentage-whole-number',
          },
        },
        {
          label: 'Auto Collapse - isDisabled with "(email already added)" in disabledOptionTextSuffix slot',
          options,
          optionTextSuffixContent: '(email already added)',
          props: {
            allowEnter: false,
            options: [
              {
                normalized_value: 'bilbo_swaggins@acme.com',
                isDisabled: true,
              },
              {
                normalized_value: 'princess_buttercup@acme.com',
                isDisabled: false,
              },
              { normalized_value: 'cloud_strife@avalanche.com' },
            ],
          },
        },
      ],
      model: {},
      suffixSaving: false,
    }),
    created() {
      this.formItems.forEach((_, index) => {
        this.$set(this.model, [index], null);
      });
    },
    methods: {
      /**
       * Click on plan design suffix to show the saving state.
       */
      suffixClick() {
        this.suffixSaving = true;

        setTimeout(() => {
          this.suffixSaving = false;
        }, 1000);
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  table {
    td {
      padding-bottom: 0;
    }

    .el-form-item {
      margin-bottom: 0;
    }
  }

  .prop-examples {
    background: $tf-extra-light-gray-1;
    padding: 20px;
  }

  code {
    display: block;
  }
</style>
