<template>
  <SettingsForm :on-submit="storeCurrencySettings" class="needs-validation ">
    <div class="card apbd-theme-card m-3 me-lg-0 mb-0 mb-lg-2">
      <div class="card-header" v-translate>
        General Settings
      </div>
      <div class="card-body apbd-loading-target p-3 ">
        <div class="form-group row">
          <label class="col-form-label col-lg-12 col-xl-4 pt-0" for="group_currency" v-translate>Per Currency Points
            Conversion</label>
          <div class="col-lg-12 col-xl-8 mb-3">
            <div class="input-group" id="group_currency">
              <Field label="Points" type="number" min="1" class="form-control text-center" id="equalPints"
                     v-model="setting['currency_points']" :placeholder="this.$gettext('Points')"
                     name="equalPints" rules="required"/>
              <span class="input-group-text">=</span>
              <Field label="Amount" type="number" min="1" class="form-control text-center" id="currencyAmounts"
                     v-model="setting['currency_amount']" :placeholder="this.$gettext('Amount')"
                     name="currencyAmounts" rules="required"/>
              <span class="input-group-text">$</span>
            </div>
            <div class="d-flex ">
              <div class="w-50">
                <ErrorMessage name="equalPints" class="apbd-v-error "/>
              </div>
              <div class=" w-50">
                <ErrorMessage name="currencyAmounts" class="apbd-v-error "/>
              </div>
            </div>

          </div>

          <label class="col-form-label col-lg-12 col-xl-4 pt-0" for="maxRedemption" v-translate>Max Redemption
            Points Per Order</label>
          <div class="col-lg-12 col-xl-8 mb-3">
            <Field label="Max Redemption Amount" type="number" min="1" class="form-control text-center w-50"
                   id="maxAmounts"
                   v-model="setting['max_redemption']" :placeholder="this.$gettext('Max points')"
                   name="maxAmounts" rules="required"/>
            <ErrorMessage name="maxAmounts" class="apbd-v-error"/>
          </div>

          <label class="col-form-label col-lg-12 col-xl-4 pt-0" for="menuTitle" v-translate>Reward User Account Menu
            Title</label>
          <div class="col-lg-12 col-xl-8 mb-3">
            <Field label="Menu Title" type="text" class="form-control text-center w-50"
                   id="menuTitle"
                   v-model="setting['user_menu_title']" :placeholder="this.$gettext('Enter Menu Title')"
                   name="menuTitle" rules="required"/>
            <ErrorMessage name="menuTitle" class="apbd-v-error"/>
          </div>

        </div>
      </div>

      <div class=" card-footer apbd-nmca-cart-footer d-flex justify-content-end">
        <button class="btn btn-sm btn-primary" type="submit" v-translate>Save</button>
      </div>
    </div>
  </SettingsForm>
</template>

<script>
import {Field, ErrorMessage} from "vee-validate";
import SettingsForm from "@/components/SettingsForm.vue";

export default {
  name: "TestSettingsForm",
  components: {Field, ErrorMessage, SettingsForm},
  data() {
    return {
      setting: {
        currency_amount: 1,
        currency_points: 10,
        max_redemption: 50,
        user_menu_title: 'Test',
      }
    }
  },
  methods: {
    async storeCurrencySettings() {
      /*
      * Do your task here
      */

      // It is a dummy request to show the settings form css animation
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }
}
</script>

<style scoped lang="scss">
.apbd-v-error {
  color: red;
}

@keyframes gradient-animation {
  0% {
    background-position: 400% 0
  }
  100% {
    background-position: 0 0
  }
}

.apbd-form-sending {
  button[type=submit] {
    pointer-events: none;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &.btn-theme {
      color: var(--apbd-btn-color, #fff) !important;
      background-color: var(--apbd-btn-bg-disable-color, #72b8d5) !important;
      border-color: var(--apbd-btn-bg-color, #348aad) !important;
      opacity: 1 !important;
    }

    &::after {
      display: inline-block;
      height: 100%;
      background-position: center;
      content: " ";
      width: 26px;
      background-size: cover;
      margin-left: 15px;
      margin-top: 2px;
      background-repeat: no-repeat;
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto; background: transparent none repeat scroll 0%25 0%25; display: block; shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Ccircle cx='84' cy='50' r='10' fill='%23fdfdfd'%3E%3Canimate attributeName='r' repeatCount='indefinite' dur='0.25s' calcMode='spline' keyTimes='0;1' values='10;0' keySplines='0 0.5 0.5 1' begin='0s'%3E%3C/animate%3E%3Canimate attributeName='fill' repeatCount='indefinite' dur='1s' calcMode='discrete' keyTimes='0;0.25;0.5;0.75;1' values='%23fdfdfd;%23fdfdfd;%23fdfdfd;%23fdfdfd;%23fdfdfd' begin='0s'%3E%3C/animate%3E%3C/circle%3E%3Ccircle cx='16' cy='50' r='10' fill='%23fdfdfd'%3E%3Canimate attributeName='r' repeatCount='indefinite' dur='1s' calcMode='spline' keyTimes='0;0.25;0.5;0.75;1' values='0;0;10;10;10' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' begin='0s'%3E%3C/animate%3E%3Canimate attributeName='cx' repeatCount='indefinite' dur='1s' calcMode='spline' keyTimes='0;0.25;0.5;0.75;1' values='16;16;16;50;84' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' begin='0s'%3E%3C/animate%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='10' fill='%23fdfdfd'%3E%3Canimate attributeName='r' repeatCount='indefinite' dur='1s' calcMode='spline' keyTimes='0;0.25;0.5;0.75;1' values='0;0;10;10;10' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' begin='-0.25s'%3E%3C/animate%3E%3Canimate attributeName='cx' repeatCount='indefinite' dur='1s' calcMode='spline' keyTimes='0;0.25;0.5;0.75;1' values='16;16;16;50;84' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' begin='-0.25s'%3E%3C/animate%3E%3C/circle%3E%3Ccircle cx='84' cy='50' r='10' fill='%23fdfdfd'%3E%3Canimate attributeName='r' repeatCount='indefinite' dur='1s' calcMode='spline' keyTimes='0;0.25;0.5;0.75;1' values='0;0;10;10;10' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' begin='-0.5s'%3E%3C/animate%3E%3Canimate attributeName='cx' repeatCount='indefinite' dur='1s' calcMode='spline' keyTimes='0;0.25;0.5;0.75;1' values='16;16;16;50;84' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' begin='-0.5s'%3E%3C/animate%3E%3C/circle%3E%3Ccircle cx='16' cy='50' r='10' fill='%23fdfdfd'%3E%3Canimate attributeName='r' repeatCount='indefinite' dur='1s' calcMode='spline' keyTimes='0;0.25;0.5;0.75;1' values='0;0;10;10;10' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' begin='-0.75s'%3E%3C/animate%3E%3Canimate attributeName='cx' repeatCount='indefinite' dur='1s' calcMode='spline' keyTimes='0;0.25;0.5;0.75;1' values='16;16;16;50;84' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' begin='-0.75s'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");

    }
  }

  .apbd-loading-target {
    position: relative;

    &:after {
      display: block;
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #F6F6F6;
      background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
      background-size: 400% 400%;
      animation: gradient-animation 5s linear infinite;
      opacity: 0.5;
    }
  }
}
</style>