<script>
import PaymentMethods from './PaymentMethods'
export default PaymentMethods.extend({
  inject: ['$validator'],
  props: {
    lottieLoaderFile: {
      type: Object,
    },
    lottieLoaderClass: {
      type: String,
    },
    crossDomain: {
      type: Boolean,
      default: false,
    },
    roundedCorner: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectedLevelIndex: null,
      lastSelected: null,
    }
  },
  methods: {
    onChangeCollapse: function(value) {
      this.selectedLevelIndex = value
      this.lastSelected = value !== null ? value : this.lastSelected
    },
    cancel: function() {
      this.selectedLevelIndex = null
      if (this.allowZeroBalance === true && this.balance === 0) {
        this.$router.go(-1)
      }
    },
    rWrapper1(el, items) {
      return el(
        'b-form-radio-group',
        {
          attrs: { id: 'el_level_1_wrapper' },
          props: { checked: this.selectedLevelIndex, stacked: true },
          class: [{ 'rounded-2': this.roundedCorner }, 'border', 'w-100', 'custom-payment-collapse', 'overflow-hidden'],
        },
        items
      )
    },
    rLevel1(el, level, level1index, items) {
      let self = this
      return el(
        'div',
        { class: ['px-2', 'py-3', 'list-group-row', { active: self.selectedLevelIndex === level1index }] },
        [
          el(
            'b-form-radio',
            {
              class: ['col-12'],
              attrs: {
                id: `level1${level1index}`,
                'data-qa': `${self.$helpers.kebabCase(level.title)}-radio-btn`,
              },
              props: {
                'aria-controls': 'payment-generic',
                value: level1index,
                disabled: self.disabled,
              },
              domProps: {
                value: level1index,
              },
              on: {
                change(value) {
                  self.onChangeCollapse(value)
                },
              },
              ref: 'formRadio',
              refInFor: true,
            },
            [
              el(
                'div',
                { class: ['payment-title', 'font-weight-semi-bold'] },
                self.$helpers.getValue(level, 'translated_title.content', level.title)
              ),
              el('div', { class: ['payment-description', 'mb-1'] }, level.description),
            ]
          ),
          ...items,
        ]
      )
    },
    rWrapper2(el, levelindex, items) {
      let self = this
      return el(
        'b-collapse',
        {
          props: {
            visible: self.selectedLevelIndex === levelindex,
          },
          attrs: {
            id: `el_${levelindex}_level_2_wrapper`,
          },
        },
        items
      )
    },
    rPaymentModeProvider(el, paymentModeProvider, paymentModeProviderIndex, items) {
      return el('div', { attrs: { id: `${paymentModeProviderIndex}_level_2` } }, [
        el('b-row', { class: ['mb-1'] }, [
          el('b-col', { props: { cols: 12, md: 3 } }),
          el('b-col', { props: { cols: 12, md: 'auto' } }, [
            el('h5', { class: ['mt-0', 'payment-provider-name'] }, paymentModeProvider.payment_mode_name),
          ]),
        ]),
        ...items,
      ])
    },
    rErrorField: function(el, field, fieldIndex, provider, modeIndex) {},
    rField: function(el, field, fieldIndex, provider, modeIndex) {
      if (this.constructor !== undefined) {
        let self = this
        let rField = self.constructor.super.options.methods.rField.call(
          self,
          el,
          field,
          fieldIndex,
          provider,
          modeIndex
        )
        let rErrorField = self.constructor.super.options.methods.rErrorField.call(
          self,
          el,
          field,
          fieldIndex,
          provider,
          modeIndex
        )
        if (rField.data !== undefined) {
          return el('b-row', { class: ['py-2'] }, [
            el(
              'b-col',
              {
                props: { cols: 12, md: 3 },
                class: ['text-md-right'],
              },
              [
                el(
                  'label',
                  {
                    class: [
                      { required: self.$helpers.getValue(rField, 'data.directives.validate.required', false) },
                      'payment-field-text',
                    ],
                  },
                  field.text
                ),
              ]
            ),
            el('b-col', { props: { cols: 12, md: 7, xl: 6 } }, [
              el(
                this.fieldTypes.get(field.type),
                (function(data) {
                  data.on = {
                    input: function(value) {
                      self.constructor.super.options.methods.updateModel.call(self, value, field, modeIndex)
                    },
                  }
                  return data
                })(rField.data)
              ),
              rErrorField,
            ]),
          ])
        }
      }
    },
    rSubmit(el, provider, lavel1Index) {
      let self = this
      const onHoldPaymentKeys = ['is_paylater', 'is_cash_on_delivery']
      let button = [
        el(
          'b-btn',
          {
            props: {
              variant: 'reset',
              disabled: provider.disabled,
            },
            attrs: {
              'data-qa': `${self.$helpers.kebabCase(provider.payment_mode_name)}-cancel-btn`,
            },
            class: ['mt-2', 'cancel-payment-button'],
            on: {
              click: function() {
                self.cancel()
              },
            },
          },
          this.$t('Form.Cancel')
        ),
      ]
      if (onHoldPaymentKeys.includes(provider.reference_key)) {
        button.push(
          el(
            'b-btn',
            {
              props: {
                variant: 'reset',
              },
              class: ['ml-2', 'mt-2', 'submit-payment-button'],
              attrs: {
                'data-qa': `${self.$helpers.kebabCase(provider.payment_mode_name)}-submit-btn`,
              },
              on: {
                click: function() {
                  self.constructor.super.options.methods.makeOnHoldPayment.call(self, provider)
                },
              },
            },
            this.$t('Form.Submit')
          )
        )
      } else {
        if (this.crossDomain && provider.payment_is_popup_view) {
          button.push(
            el(
              'b-btn',
              {
                props: {
                  variant: 'reset',
                  disabled: provider.disabled,
                },
                class: ['ml-2', 'mt-2', 'submit-payment-button'],
                attrs: {
                  'data-qa': `${self.$helpers.kebabCase(provider.payment_mode_name)}-submit-btn`,
                },
                on: {
                  click: function() {
                    self.constructor.super.options.methods.makeCrossDomainPayment.call(self, provider, lavel1Index)
                  },
                },
              },
              this.$t('Form.Submit')
            )
          )
        } else {
          button.push(
            el(
              'b-btn',
              {
                props: {
                  variant: 'reset',
                  disabled: provider.disabled,
                },
                attrs: {
                  'data-qa': `${self.$helpers.kebabCase(provider.payment_mode_name)}-submit-btn`,
                },
                class: ['ml-2', 'mt-2', 'submit-payment-button'],
                on: {
                  click: function() {
                    self.constructor.super.options.methods.makePayment.call(self, provider, lavel1Index)
                  },
                },
              },
              this.$t('Form.Submit')
            )
          )
        }
        if (provider.qr_code === 1) {
          button.push(
            el(
              'b-btn',
              {
                props: {
                  variant: 'reset',
                  disabled: provider.disabled,
                },
                attrs: {
                  'data-qa': `${self.$helpers.kebabCase(provider.payment_mode_name)}-share-qr-btn`,
                },
                class: ['ml-2', 'mt-2', 'share-payment-link-btn'],
                on: {
                  click: function() {
                    self.constructor.super.options.methods.getQrCode.call(self, provider, lavel1Index)
                  },
                },
              },
              this.$t('Form.SubmitQrCode')
            )
          )
        }
      }
      return el('b-row', [
        el('b-col', {
          props: (provider.full_width && { cols: 'auto' }) || { cols: 12, md: 3 },
          class: [{ 'pl-2': provider.full_width }],
        }),
        el(
          'b-col',
          {
            props: { cols: 12, md: 7, xl: 6 },
            class: [{ 'text-right': !provider.full_width }, { 'ml-4 ml-md-0': provider.full_width }],
          },
          button
        ),
      ])
    },
    rOnHoldPaymentMethods(el, level1, level1Index) {
      level1 = { ...level1, payment_mode_name: level1.title, full_width: true }
      let self = this
      return self.rLevel1(el, level1, `ohp${level1Index}`, [
        self.rWrapper2(el, `ohp${level1Index}`, [self.rSubmit(el, level1, 0)]),
      ])
    },
  },
  watch: {
    disabled(oldVal, newVal) {
      if (!newVal && this.selectedPayment !== null) {
        if (!(this.allowZeroBalance === true && this.balance === 0)) {
          this.cancel()
        }
        this.selectedLevelIndex = null
      }

      if (newVal) {
        this.selectedLevelIndex = this.lastSelected
      }
    },
  },
})
</script>
