<template>
  <VCodeBlock
      :code="import_code"
      highlightjs
      label="Import"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <!--  <VCodeBlock-->
  <!--      :code="modal_props"-->
  <!--      highlightjs-->
  <!--      label="Demo Code"-->
  <!--      lang="javascript"-->
  <!--      tabs="true"-->
  <!--      theme="hybrid"-->
  <!--  />-->
  <props-details-table :props-data="props_data"/>
  <label class="form-label">Example</label>
  <div class="d-flex flex-wrap gap-3">
    <button class="btn btn-primary" @click="show('sm')">Small Modal</button>
    <button class="btn btn-primary" @click="show('md')">Medium Modal</button>
    <button class="btn btn-primary" @click="show('lg')">Large Modal</button>
    <button class="btn btn-primary" @click="show('xl')">Full Page Modal</button>
  </div>
  <VCodeBlock
      :code="demo_code"
      highlightjs
      label="Demo"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />

  <modal v-if="show_modal" :modal-size="size" @close=closeModal>
    <template v-slot:header>
      <span v-translate>Header Title</span>
    </template>
    <template v-slot:body>
      <div class="row">
        <div class="col-sm-12">
          <h5>Demo body data</h5>
          <i class="apmc ap-check-circle-o"></i>
          <translate>Apply Coupon box can be displayed in mini cart</translate>
          <br>
          <i class="apmc ap-check-circle-o"></i>
          <translate>Applied Coupon box can be displayed in cart</translate>
          <br>
          <i class="apmc ap-check-circle-o"></i>
          <translate>You will get the wonderful Module called</translate>
          <strong v-translate>Sale Booster</strong> <br>
          <i class="apmc ap-check-circle-o"></i>
          <translate>You will get premium support</translate>

        </div>
      </div>
    </template>
    <template v-slot:footer>
      <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal" @click="closeModal" v-translate>
        Cancel
      </button>
    </template>
  </modal>
</template>

<script>
import Modal from "@/components/Modal"
import VCodeBlock from '@wdns/vue-code-block';
import PropsDetailsTable from "./PropsDetailsTable.vue";

export default {
  name: "TestModal",
  components: {PropsDetailsTable, Modal, VCodeBlock},
  data() {
    return {
      show_lg_modal: false,
      show_modal: false,
      size: 'lg',
      import_code: "import Modal from \"@appsbd/vue3-appsbd-libs\"",
      props_data: [
        {
          name: 'modal-size',
          type: 'String',
          default_val: '',
          details: 'Define modal size.'
        },
        {
          name: 'modal-msg',
          type: 'String',
          default_val: '',
          details: 'Message to display in the modal based on the response.'
        },
        {
          name: 'hide-header',
          type: 'Boolean',
          default_val: 'false',
          details: 'Modal header hide option.'
        },
        {
          name: 'hide-footer',
          type: 'Boolean',
          default_val: 'false',
          details: 'Modal footer hide option.'
        },
        {
          name: 'hide-cross-btn',
          type: 'Boolean',
          default_val: 'false',
          details: 'Modal close button hide option.'
        },
        {
          name: 'hide-form',
          type: 'Boolean',
          default_val: 'false',
          details: 'Modal default form hide option.'
        },
        {
          name: 'body-class',
          type: 'String',
          default_val: '',
          details: 'Modal body class.'
        },
        {
          name: 'is-modal-center',
          type: 'Boolean',
          default_val: 'true',
          details: 'Modal body position.'
        },
      ],
      modal_props: "props: {\n" +
          "    isModalVisible: Boolean,\n" +
          "    modalSize:String,// modal-sm, modal-md, modal-lg, modal-xl\"\n" +
          "    modalMsg:{\n" +
          "      type:String,\n" +
          "      default:\"\"\n" +
          "    },\n" +
          "    hideHeader:{\n" +
          "      type:Boolean,\n" +
          "      default:false\n" +
          "    },\n" +
          "    hideFooter:{\n" +
          "      type:Boolean,\n" +
          "      default:false\n" +
          "    },\n" +
          "    hideCrossBtn:{\n" +
          "      type:Boolean,\n" +
          "      default:false\n" +
          "    },\n" +
          "    hideForm:{\n" +
          "      type:Boolean,\n" +
          "      default:false\n" +
          "    },\n" +
          "    bodyClass:{\n" +
          "      type:String,\n" +
          "      default:\"\"\n" +
          "    },\n" +
          "    isModalCenter:{\n" +
          "      type:Boolean,\n" +
          "      default:true\n" +
          "    }\n" +
          "  },",
      demo_code: "  <modal  v-if=\"show_modal\" :modal-size=\"modal-lg\"  @close=closeModal>\n" +
          "    <template v-slot:header>\n" +
          "      <span v-translate>Header Title</span>\n" +
          "    </template>\n" +
          "    <template v-slot:body>\n" +
          "      <div class=\"row\">\n" +
          "        <div class=\"col-sm-12\">\n" +
          "          <h5>Demo body data</h5>\n" +
          "          <i class=\"apmc ap-check-circle-o\"></i> <translate>Apply Coupon box can be displayed in mini cart</translate> <br>\n" +
          "          <i class=\"apmc ap-check-circle-o\"></i> <translate>Applied Coupon box can be displayed in cart</translate> <br>\n" +
          "          <i class=\"apmc ap-check-circle-o\"></i> <translate>You will get the wonderful Module called</translate> <strong v-translate>Sale Booster</strong> <br>\n" +
          "          <i class=\"apmc ap-check-circle-o\"></i> <translate>You will get premium support</translate>\n" +
          "\n" +
          "        </div>\n" +
          "      </div>\n" +
          "    </template>\n" +
          "    <template v-slot:footer>\n" +
          "      <button type=\"button\" class=\"btn btn-sm btn-danger\" data-dismiss=\"modal\" @click=\"closeModal\" v-translate>\n" +
          "        Cancel\n" +
          "      </button>\n" +
          "    </template>\n" +
          "  </modal>"
    }
  },
  methods: {
    closeModal() {
      this.show_modal = false;
      this.show_lg_modal = false;
    },
    show(val) {
      this.size = "modal-" + val;
      this.show_modal = true;
    }
  }
}
</script>

<style scoped>

</style>