<template>
  <ExampleStory>
    <section>
      <div>
        <h2>AppIcon</h2>
        <p>
          A wrapper around the &lt;i&gt; tag that uses the <AppButton
            href="https://fontawesome.com/docs"
            text="fontawesome icon library"
            size="text"
          />.
        </p>
        <h3>Example</h3>
        <AppIcon v-bind="{ ...propsModel }" />
      </div>
    </section>
    <template #controls>
      <div>
        <ElForm label-position="top">
          <h3>Props</h3>
          <TfFormBuilder
            v-model="propsModel"
            v-bind="{
              formItems,
              isLoaded: true,
            }"
          >
            <template #label="{ prop }">
              {{ prop }}
              <TfTooltip
                v-if="propDescription[prop]"
                :options="{
                  placement: 'top-start',
                }"
                class="description-help"
              >
                <p>{{ propDescription[prop] }}</p>
                <AppIcon
                  slot="reference"
                  icon="fa-solid fa-circle-question"
                  type="info"
                  size="1x"
                />
              </TfTooltip>
            </template>
          </TfFormBuilder>
        </ElForm>
      </div>
    </template>
  </ExampleStory>
</template>

<script>
  import mixin from './mixin';

  export default {
    name: 'ExampleAppIcon',
    components: {
      ExampleStory: () => import('@/views/examples/Layouts/Story'),
    },
    mixins: [mixin],
    data: () => ({
      formItems: [
        [
          {
            defaultValue: 'fa-solid fa-download',
            props: {
              label: 'icon',
              prop: 'icon',
              options: [
                {
                  label: 'download',
                  value: 'fa-solid fa-download',
                },
                {
                  label: 'plus',
                  value: 'fa-solid fa-plus',
                },
                {
                  label: 'question-circle',
                  value: 'fa-solid fa-circle-question',
                },
                {
                  label: 'pencil-alt',
                  value: 'fa-solid fa-pencil-alt',
                },
              ],
              optionKey: 'value',
              optionLabel: 'label',
              type: 'select',
              description: 'A string which includes the icon type (fa-solid, fa-regular, etc) and icon name (fa-trash-can, fa-circle-info, etc) to render.',
            },
          },
          {
            defaultValue: 'lg',
            props: {
              label: 'size',
              prop: 'size',
              options: [
                // relative sizes
                '2xs',
                'xs',
                'sm',
                'lg',
                'xl',
                '2xl',
                // literal sizes
                '1x',
                '2x',
                '3x',
                '4x',
                '5x',
                '6x',
                '7x',
                '8x',
                '9x',
                '10x',
              ].map((value) => ({ value })),
              optionKey: 'value',
              optionLabel: 'value',
              type: 'select',
              description: 'The fontawesome icon size property without the `fa-` prefix, which is added to the class automatically.',
            },
          },
          {
            defaultValue: '',
            props: {
              label: 'type',
              prop: 'type',
              options: [
                {
                  label: 'no type',
                  value: '',
                },
                {
                  label: 'danger',
                  value: 'danger',
                },
                {
                  label: 'info',
                  value: 'info',
                },
                {
                  label: 'primary',
                  value: 'primary',
                },
                {
                  label: 'success',
                  value: 'success',
                },
                {
                  label: 'warning',
                  value: 'warning',
                },
              ].map(({ label, value }) => ({ label, value })),
              optionKey: 'value',
              optionLabel: 'label',
              type: 'select',
              description: 'The prop used to render themed colors (danger, success, etc).',
            },
          },
          {
            defaultValue: false,
            props: {
              label: 'noBranding',
              prop: 'noBranding',
              type: 'switch',
              description: 'Prop used to render the "primary" and "secondary" type buttons with ThreeFlow blue instead of branding colors.',
            },
          },
        ],
      ],
      propsModel: {},
    }),
  };
</script>
