<template>
  <VCodeBlock
      :code="import_code"
      highlightjs
      label="Import"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <!--  <VCodeBlock-->
  <!--      :code="wp_image_selector_props"-->
  <!--      highlightjs-->
  <!--      label="Props"-->
  <!--      lang="javascript"-->
  <!--      tabs="true"-->
  <!--      theme="hybrid"-->
  <!--  />-->
  <props-details-table :props-data="props_data"/>
  <label class="form-label">Example</label>
  <ImageSelector title="Select Image"
                 container-width="100"
                 container-height="66"
                 class="mb-1"
                 img-width="166"
                 v-model:url="selectedImg"
                 img-height="80"
  />
  <VCodeBlock
      :code="demo_code"
      highlightjs
      label="Demo"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
</template>

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

export default {
  name: "TestImageSelector",
  components: {PropsDetailsTable, ImageSelector, VCodeBlock},
  data() {
    return {
      import_code: "import ImageSelector from \"@appsbd/vue3-appsbd-libs\";",
      props_data: [
        {
          name: 'model-value',
          type: 'String',
          default_val: '',
          details: 'Bind the value in the child component.'
        },
        {
          name: 'file',
          type: 'Object',
          default_val: '{ }',
          details: "Customize image data to use in slot which name is 'info'."
        },
        {
          name: 'id',
          type: 'String',
          default_val: '',
          details: ""
        },
        {
          name: 'title',
          type: 'String',
          default_val: 'File',
          details: 'Title of the component.'
        },
        {
          name: 'container-width',
          type: 'Number',
          default_val: '100',
          details: 'Image container width computed with img-width and img-height props if container-height is not given.'
        },
        {
          name: 'container-height',
          type: 'Number',
          default_val: 'null',
          details: 'Image container height.'
        },
        {
          name: 'img-width',
          type: 'Number',
          default_val: '166',
          details: 'Image container width computed with img-width and img-height props if container-height is not given.'
        },
        {
          name: 'img-hright',
          type: 'Number',
          default_val: '60',
          details: 'Image container width computed with img-width and img-height props if container-height is not given.'
        },
        {
          name: 'is-crop',
          type: 'Boolean',
          default_val: 'false',
          details: 'Determines whether the user is allowed to crop the image before uploading or saving.'
        },
      ],
      wp_image_selector_props: "  props:{\n" +
          "    modelValue:'',\n" +
          "    file:{\n" +
          "      default: {}\n" +
          "    },\n" +
          "    id:{\n" +
          "      type:String,\n" +
          "      default:\"\"\n" +
          "    },\n" +
          "    url:{\n" +
          "      type:String,\n" +
          "      default:\"\"\n" +
          "    },\n" +
          "    title:{\n" +
          "      type:String,\n" +
          "      default:\"File\"\n" +
          "    } ,\n" +
          "    buttonText:{\n" +
          "      type:String,\n" +
          "      default:'Select',\n" +
          "    },\n" +
          "    containerWidth:{\n" +
          "      default:100,\n" +
          "    },\n" +
          "    containerHeight:{\n" +
          "      default:null,\n" +
          "    },\n" +
          "\n" +
          "    imgWidth:{\n" +
          "      default:166,\n" +
          "    },\n" +
          "    imgHeight:{\n" +
          "      default:60,\n" +
          "    },\n" +
          "    isCrop:{\n" +
          "      type:Boolean,\n" +
          "      default:false\n" +
          "    }\n" +
          "\n" +
          "  }",
      demo_code: "  <ImageSelector title=\"Select Image\"\n" +
          "                 container-width=\"100\"\n" +
          "                 container-height=\"66\"\n" +
          "                 class=\"mb-1\"\n" +
          "                 img-width=\"166\"\n" +
          "                 v-model:url=\"selectedImg\"\n" +
          "                 img-height=\"80\"\n" +
          "  />",
      selectedImg: ""
    }
  }
}
</script>

<style scoped>

</style>