<template>
  <ExampleStory>
    <section>
      <div>
        <h3>Playground</h3>
        <p>
          <AppButton
            v-bind="{
              ...propsModel,
              icon: propsModel.icon === 'no icon' ? null : propsModel.icon,
              text: textProp,
            }"
            @click="onEmit('click', $event)"
          >
            {{ text }}
          </AppButton>
        </p>
      </div>
      <div>
        <h3>Examples</h3>
        <div class="example-section">
          <p>
            Here is an example of the <AppButton
              type="danger"
              size="text"
              text="a text type"
              @click="onEmit('click', $event)"
            /> button.
          </p>
        </div>
        <div class="example-section">
          <p>
            <small>
              Here is an example of the <AppButton
                type="primary"
                size="text-small"
                text="a text-small type"
                @click="onEmit('click', $event)"
              /> button.
            </small>
          </p>
        </div>
        <div class="example-section">
          <AppAlert show-icon>
            "appAlert" components that have buttons in them require <AppButton
              type="danger"
              size="text"
              text="a text type"
              @click="onEmit('click', $event)"
            /> button. The styling is handled in the component.
          </AppAlert>
        </div>
        <div class="example-section">
          <AppAlert
            show-icon
            type="danger"
          >
            "appAlert" components also supports <AppButton
              size="text"
              text="multiple buttons"
              @click="onEmit('click', $event)"
            />&nbsp;<AppButton
              size="text"
              text="next to each other"
              @click="onEmit('click', $event)"
            />. The styling is handled in the component.
          </AppAlert>
        </div>
        <div class="example-section">
          <strong>text + primary</strong>:
          Use in workflows when given an option of moving forward or backward.
          <div class="btn-group">
            <AppButton
              size="text"
              text="Cancel"
              no-branding
              @click="onEmit('click', $event)"
            />
            <AppButton
              text="Continue"
              @click="onEmit('click', $event)"
            />
          </div>
        </div>
        <div class="example-section">
          <strong>large + large</strong>:
          Use for large sets of common or grouped flows.
          <div class="btn-group">
            <AppButton
              text="Break a heart"
              size="large"
              icon="fa-solid fa-heart-crack"
              @click="onEmit('click', $event)"
            />
            <AppButton
              text="Mend a broken heart"
              size="large"
              icon="fa-solid fa-heart"
              @click="onEmit('click', $event)"
            />
          </div>
        </div>
      </div>
    </section>
    <template #controls>
      <div>
        <h3>Default slot:</h3>
        <ElInput v-model="text" />
        <h3>
          "Text" prop:
          <TfTooltip
            :options="{
              placement: 'top-start',
            }"
            class="description-help"
          >
            <p>Using the "text" prop will override the $default slot.</p>
            <AppIcon
              slot="reference"
              icon="fa-solid fa-circle-question"
              size="sm"
            />
          </TfTooltip>
        </h3>
        <ElInput v-model="textProp" />
      </div>
      <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"
                  size="sm"
                />
              </TfTooltip>
            </template>
          </TfFormBuilder>
        </ElForm>
      </div>
      <div>
        <h3>@emits:</h3>
        <div
          v-for="({ name, payload }, index) in emits"
          :key="index"
          class="emit"
        >
          <p><strong>name:</strong> <pre>{{ name }}</pre></p>
          <p><strong>payload:</strong> <pre>{{ payload }}</pre></p>
        </div>
      </div>
    </template>
  </ExampleStory>
</template>

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

  export default {
    name: 'ExampleAppButton',
    components: {
      ExampleStory: () => import('@/views/examples/Layouts/Story'),
    },
    mixins: [mixin],
    data: () => ({
      formItems: [
        [
          {
            defaultValue: 'medium',
            props: {
              label: 'size',
              prop: 'size',
              options: [
                'icon',
                'icon-small',
                'small',
                'medium',
                'large',
                'text',
                'text-small',
              ].map((value) => ({ value })),
              optionKey: 'value',
              optionLabel: 'value',
              type: 'select',
              description: 'Prop used to render an icon, button size, or text size version of the button.',
            },
          },
          {
            defaultValue: 'primary',
            props: {
              label: 'type',
              prop: 'type',
              options: [
                'success',
                'danger',
                'primary',
                'secondary',
              ].map((value) => ({ value })),
              optionKey: 'value',
              optionLabel: 'value',
              type: 'select',
              description: 'Prop used to render the green, red, or branded (or ThreeFlow blue) style.',
            },
          },
          {
            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.',
            },
          },
        ],
        [
          {
            defaultValue: 'no icon',
            props: {
              label: 'icon',
              prop: 'icon',
              options: [
                {
                  label: 'no icon',
                  value: '',
                },
                {
                  label: 'download',
                  value: 'fa-solid fa-download',
                },
                {
                  label: 'plus',
                  value: 'fa-solid fa-plus',
                },
                {
                  label: 'question-circle',
                  value: 'fa-solid fa-circle-question',
                },
              ],
              optionKey: 'value',
              optionLabel: 'label',
              type: 'select',
              description: 'Prop used to select the name of the icon to be used in the template. See https://fontawesome.com/docs/web/use-with/vue/add-icons for more information.',
            },
          },
          {
            props: {
              label: 'prepend',
              prop: 'prepend',
              type: 'switch',
              description: 'Prop used to update the css to reverse the css flex-direction.',
            },
          },
        ],
        [
          {
            props: {
              label: 'isBlock',
              prop: 'isBlock',
              type: 'switch',
              description: 'Prop used to set the width to 100% and center the text.',
            },
          },
          {
            props: {
              label: 'isDisabled',
              prop: 'isDisabled',
              type: 'switch',
              description: 'Prop used to disable the element in the template.',
            },
          },
          {
            props: {
              label: 'isLoading',
              prop: 'isLoading',
              type: 'switch',
              description: 'Prop used to disable the element in the template and render a spinning icon if an icon is present.',
            },
          },
        ],
        [
          {
            defaultValue: 'button',
            props: {
              label: 'tag',
              prop: 'tag',
              options: [
                'button',
                'a',
              ].map((value) => ({ value })),
              optionKey: 'value',
              optionLabel: 'value',
              type: 'select',
              description: 'Prop used to render the element either as a `<button />` or `<a />` tag.',
            },
          },
        ],
        [
          {
            props: {
              label: 'href',
              prop: 'href',
              type: 'text',
              description: 'Prop used to select the name of the icon to be used in the template. See the https://fontawesome.com/docs/web/use-with/vue/add-icons for more information.',
            },
          },
          {
            props: {
              label: 'target',
              prop: 'target',
              type: 'text',
              description: 'Prop used to pass the {@target https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target} attribute used for an anchor tag.',
            },
          },
        ],
        [
          {
            props: {
              label: 'nativeType',
              prop: 'nativeType',
              type: 'text',
              description: 'Prop used to pass the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-type attribute used for an anchor tag.',
            },
          },
        ],
      ],
      text: 'mouse',
      textProp: '',
      useDefaultSlot: true,
    }),
  };
</script>

<style lang="scss" scoped>
  .btn-group {
    margin-top: 20px;
  }

  section {
    display: flex;

    > div:first-child {
      width: 200px;
      padding-right: 20px;
    }
  }

  .emit {
    padding: 10px 0;
    border-bottom: 1px solid var(--tf-gray-light-medium);
  }

  .example-section {
    padding: 20px 0;

    &:not(:last-of-type) {
      border-bottom: 1px solid var(--tf-gray-light-medium);
    }
  }
</style>
