<template>
  <ExampleStory>
    <section>
      <div>
        <h3>AppQuoteEditItem</h3>
        <ul>
          <AppQuoteEditItem
            v-bind="{
              ...propsModel,
              item: items[propsModel.item],
            }"
          />
        </ul>
      </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"
                  size="sm"
                />
              </TfTooltip>
            </template>
          </TfFormBuilder>
        </ElForm>
      </div>
    </template>
  </ExampleStory>
</template>

<script>
  import ProjectHistory from '@/factories/projectHistory';
  import mixin from './mixin';

  export default {
    name: 'ExampleAppQuoteEditItem',
    components: {
      ExampleStory: () => import('@/views/examples/Layouts/Story'),
    },
    mixins: [mixin],
    data: () => ({
      formItems: [
        [
          {
            defaultValue: true,
            props: {
              prop: 'showNewBadge',
              label: 'showNewBadge',
              type: 'switch',
            },
          },
          {
            defaultValue: false,
            props: {
              prop: 'showEditor',
              label: 'showEditor',
              type: 'switch',
            },
          },
          {
            defaultValue: '',
            props: {
              prop: 'attributeLink',
              label: 'attributeLink',
              type: 'text',
            },
          },
          {
            defaultValue: 'carrier responsible plan based',
            props: {
              prop: 'item',
              type: 'select',
              options: [
                'carrier responsible plan based',
                'broker responsible class based',
                'new comment',
                'non subtype edit',
              ].map((value) => ({ value })),
              optionKey: 'value',
              optionLabel: 'value',
            },
          },
        ],
      ],
      items: {
        'carrier responsible plan based': ProjectHistory.getProjectHistoryItem(),
        'broker responsible class based': ProjectHistory.getProjectHistoryItem({
          responsible_user: {
            broker: { name: 'Sterling' },
          },
          carrier: { name: '' },
          history_details: {
            container_type: 'Class',
          },
        }),
        'new comment': ProjectHistory.getProjectHistoryItem({
          root: { is_new: true },
        }),
        'non subtype edit': ProjectHistory.getProjectHistoryItem({
          history_details: {
            tier_subtype_name: null,
          },
        }),
      },
    }),
  };
</script>
