<template>
  <ExampleStory>
    <section>
      <TfInlineFormField
        ref="inlineFormField"
        v-bind="{
          ...propsModel,
          prop: 'test-prop',
        }"
        :key="uniqueId"
        v-model="model"
        @cancel="onEmit('cancel', $event)"
        @edit="onEmit('edit', $event)"
        @delete="onEmit('delete', $event)"
        @input="onEmit('input', $event)"
        @save="onEmit('save', $event)"
      >
        <TfDatePicker
          v-if="slotType"
          ref="datepicker"
          v-model="model"
          :show-calendar-on-focus="true"
          @closed="propsModel.isEditing = false"
        />
      </TfInlineFormField>
    </section>
    <template #controls>
      <div>
        <h3>model</h3>
        <pre>{{ model }}</pre>
        <h3>Slots</h3>
        <ElForm>
          <ElFormItem size="medium">
            <ElSelect v-model="slotType">
              <ElOption v-bind="{ label: 'none', value: null }" />
              <ElOption v-bind="{ label: 'TfCalendar', value: 'TfCalendar' }" />
            </ElSelect>
          </ElFormItem>
        </ElForm>
      </div>
      <div>
        <h3>Props</h3>
        <ElFormBuilder
          v-model="propsModel"
          v-bind="{ formItems, isLoaded: true }"
        />
      </div>
      <div>
        <h3>@emits</h3>
        <div
          v-for="({ name, payload }, index) in emits"
          :key="index"
          class="emit"
        >
          <h4>name: {{ name }}</h4>
          <pre>{{ payload }}</pre>
        </div>
      </div>
    </template>
  </ExampleStory>
</template>

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

  export default {
    name: 'ExampleInlineFormField',
    components: { ExampleStory },
    data: () => ({
      model: 'klkjasdf;lkjasdfl kjhasdflk jhasdf lkjhasf lkjahsdf lkjahsfblah-blah-blah',
      slotType: null,
      propsModel: {},
      emits: [],
      uniqueId: 1,
    }),
    computed: {
      /**
       * Create an array for form items for the props that disable the "isHovering" if isEditing is true.
       *
       * @returns {Array}
       */
      formItems() {
        return [
          [{
            defaultValue: true,
            props: {
              label: 'isRequired',
              prop: 'isRequired',
              type: 'switch',
            },
          }],
          [{
            defaultValue: true,
            props: {
              label: 'showExtension',
              prop: 'showExtension',
              type: 'switch',
            },
          }],
          [{
            defaultValue: false,
            isInline: true,
            props: {
              disabled: this.propsModel.isSaving,
              label: 'isDeleting',
              prop: 'isDeleting',
              type: 'switch',
            },
          }],
          [{
            defaultValue: false,
            isInline: true,
            props: {
              label: 'isDisabled',
              prop: 'isDisabled',
              type: 'switch',
            },
          }],
          [{
            defaultValue: false,
            isInline: true,
            props: {
              label: 'isEditing',
              prop: 'isEditing',
              type: 'switch',
            },
          }],
          [{
            defaultValue: false,
            isInline: true,
            props: {
              disabled: this.propsModel.isEditing,
              label: 'isHovering',
              prop: 'isHovering',
              type: 'switch',
            },
          }],
          [{
            defaultValue: false,
            isInline: true,
            props: {
              disabled: this.propsModel.isDeleting,
              label: 'isSaving',
              prop: 'isSaving',
              type: 'switch',
            },
          }],
          [{
            defaultValue: 'Placeholder text here',
            props: {
              label: 'placeholder',
              prop: 'placeholder',
              type: 'text',
            },
          }],
          [{
            defaultValue: true,
            isInline: true,
            props: {
              label: 'showBtnActions',
              prop: 'showBtnActions',
              type: 'switch',
            },
          }],
          [{
            defaultValue: true,
            isInline: true,
            props: {
              label: 'showBtnDelete',
              prop: 'showBtnDelete',
              type: 'switch',
            },
          }],
          [{
            defaultValue: '',
            props: {
              label: 'deleteType',
              prop: 'deleteType',
              type: 'text',
            },
          }],
          [{
            defaultValue: true,
            isInline: true,
            props: {
              label: 'showBtnEdit',
              prop: 'showBtnEdit',
              type: 'switch',
            },
          }],
        ];
      },
    },
    watch: {
      'propsModel.showExtension': {
        /**
         * Append or remove an example showExtension and create and a new ID to redraw.
         *
         * @param {boolean} newValue
         */
        handler(newValue) {
          this.model = newValue
            ? `${this.model}.pdf`
            : this.model.replace('.pdf', '');
          this.uniqueId += 1;
        },
      },
      'propsModel.isEditing': {
        /**
         * Focus on the datepicker in order to open it.
         *
         * @param {boolean} newValue
         */
        handler(newValue) {
          if (newValue && this.slotType === 'TfCalendar') {
            this.$nextTick(() => {
              this.$refs.datepicker.$el.querySelector('input').focus();
            });
          }
        },
      },
      /**
       * Change some props base on if the TfCalender slot is used or not.
       *
       * @param {boolean} newValue
       */
      slotType(newValue) {
        this.model = !newValue
          ? 'klkjasdf;lkjasdfl kjhasdflk jhasdf lkjhasf lkjahsdf lkjahsfblah-blah-blah'
          : '03/16/81';

        this.propsModel.showExtension = !newValue;
        this.propsModel.showBtnDelete = !newValue;
        this.propsModel.showBtnEdit = !newValue;
        this.propsModel.showBtnActions = !newValue;
      },
    },
    created() {
      this.formItems.forEach((formItem) => {
        const { defaultValue, props } = formItem[0];

        this.$set(this.propsModel, [props.prop], defaultValue);
      });
    },
    methods: {
      /**
       * Updates the `payloads.emitted` object to the latest payload for display only purposes.
       *
       * @param {string} name
       * @param {object} payload
       */
      onEmit(name, payload) {
        this.emits.unshift({ name, payload });

        if (name === 'save') {
          this.propsModel.isSaving = true;

          setTimeout(() => {
            this.propsModel.isSaving = false;
            this.propsModel.isEditing = false;
            this.model = payload;
          }, 1000);
        }

        if (name === 'delete') {
          this.propsModel.isDeleting = true;

          setTimeout(() => {
            this.propsModel.isDeleting = false;
          }, 1000);
        }

        if (name === 'cancel') {
          this.model = payload;
          this.propsModel.isEditing = payload;
        }

        if (name === 'edit') {
          this.propsModel.isEditing = payload;
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  section {
    width: 500px;
  }

  ::v-deep .demo-page-content {
    min-height: 400px;
  }

  .emit {
    padding: 10px 0;
    border-bottom: 1px solid $tf-extra-light-gray-1;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
  }

  .vdp-datepicker {
    &,
    ::v-deep input {
      width: 100%;
    }
  }
</style>
