<template>
  <ExampleStory>
    <section>
      <div>
        <h2>AppAlert</h2>
        <p>
          A standalone global alert that supports branded, danger, success, warning, and info types.
          Allows for custom icons, description, and title.
          Can also optionally center, make closable and show icons.
        </p>
        <h3>Example</h3>
        <AppAlert v-bind="{ ...propsModel }" />
        <br>
        <AppAlert v-bind="{ ...propsModel }">
          This is an example of an alert with
          <AppButton
            size="text"
            text="a button"
          />
          in the description.
        </AppAlert>
      </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: 'ExampleAppAlert',
    components: {
      ExampleStory: () => import('@/views/examples/Layouts/Story'),
    },
    mixins: [mixin],
    data: () => ({
      formItems: [
        [
          {
            defaultValue: 'info',
            props: {
              label: 'type',
              prop: 'type',
              options: [
                'danger',
                'success',
                'info',
                'warning',
                'neutral',
              ].map((value) => ({ value })),
              optionKey: 'value',
              optionLabel: 'value',
              type: 'select',
              description: 'Used to render the green, red, or branded (or ThreeFlow blue) style.',
            },
          },
          {
            defaultValue: 'This is an example of an alert.',
            props: {
              label: 'description',
              prop: 'description',
              type: 'text',
              description: 'Used to render the alert copy. This is also the default slot.',
            },
          },
          {
            defaultValue: '',
            props: {
              label: 'title',
              prop: 'title',
              type: 'text',
              description: 'Used to render the alert title above the description. This is also the `title` named slot.',
            },
          },
          {
            defaultValue: 'xl',
            props: {
              label: 'icon-size',
              prop: 'icon-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: 'Used to control the size of the icon.',
            },
          },
        ],
        [
          {
            defaultValue: false,
            props: {
              label: 'center',
              prop: 'center',
              type: 'switch',
              description: 'Used to horizontally align the text in the center.',
            },
          },
          {
            defaultValue: false,
            props: {
              label: 'closable',
              prop: 'closable',
              type: 'switch',
              description: 'Use to display the icon to close the alert. Not compatible with a true "isRounded" prop.',
            },
          },
          {
            defaultValue: '',
            props: {
              label: 'customIcon',
              prop: 'customIcon',
              type: 'text',
              description: 'Use to display a custom icon instead of the default.',
            },
          },
          {
            defaultValue: false,
            props: {
              label: 'showIcon',
              prop: 'showIcon',
              type: 'switch',
              description: 'Used to icon associated with the alert type.',
            },
          },
          {
            defaultValue: false,
            props: {
              label: 'isRounded',
              prop: 'isRounded',
              type: 'switch',
              description: 'Convert the alert to a rounded shape.',
            },
          },
        ],
      ],
    }),
  };
</script>
