<template>
  <ExampleStory>
    <section>
      <TfBadge
        v-bind="{
          ...propsModel,
          value
        }"
      />
    </section>
    <template #controls>
      <div>
        <h3>Value</h3>
        <p><em>UX recommends a character limit of 30-ish</em></p>
        <ElForm>
          <ElFormItem size="medium">
            <ElInput v-model="value" />
          </ElFormItem>
        </ElForm>
      </div>
      <div>
        <h3>Props</h3>
        <TfFormBuilder
          v-model="propsModel"
          v-bind="{ formItems, isLoaded: true }"
        >
          <template #label="{ prop }">
            {{ prop }}
            <TfTooltip
              v-if="['isCounter', 'isPill'].includes(prop)"
              :options="{ placement: 'top-start' }"
              class="description-help"
            >
              <template v-if="prop === 'isPill'">
                For use when identifying a user type/role.
              </template>
              <template v-else>
                For use as a counting notification like comments, updates, etc.
                It is advised to use Number type when 'isCounter' is true.
              </template>
              <icon
                slot="reference"
                name="question-circle"
              />
            </TfTooltip>
          </template>
        </TfFormBuilder>
      </div>
    </template>
  </ExampleStory>
</template>

<script>
  import ExampleStory from '@/views/examples/Layouts/Story';

  export default {
    name: 'ExampleTfBadge',
    components: { ExampleStory },
    data: () => ({
      formItems: [
        [{
          defaultValue: false,
          props: {
            label: 'isCounter',
            prop: 'isCounter',
            type: 'switch',
          },
        }],
        [{
          defaultValue: false,
          props: {
            label: 'isPill',
            prop: 'isPill',
            type: 'switch',
          },
        }],
        [{
          defaultValue: false,
          props: {
            label: 'isSolid',
            prop: 'isSolid',
            type: 'switch',
          },
        }],
        [{
          defaultValue: 'medium',
          props: {
            label: 'size',
            options: ['small', 'medium', 'large'].map((value) => ({ value })),
            optionKey: 'value',
            optionLabel: 'value',
            prop: 'size',
            type: 'select',
          },
        }],
        [{
          defaultValue: 'notify',
          props: {
            label: 'status',
            options: ['error', 'notify', 'success', 'warn'].map((value) => ({ value })),
            optionKey: 'value',
            optionLabel: 'value',
            prop: 'status',
            type: 'select',
          },
        }],
      ],
      value: 'new',
      propsModel: {},
    }),
    created() {
      this.formItems.forEach((formItem) => {
        const { defaultValue, props } = formItem[0];

        this.$set(this.propsModel, [props.prop], defaultValue);
      });
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep {
    .demo-page-controls {
      min-height: 400px;
    }

    .tf-tooltip {
      width: 250px;
      line-height: 14px;
    }
  }
</style>
