<template>
  <VCodeBlock
      :code="code_1"
      highlightjs
      label="Import"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <!--  <VCodeBlock-->
  <!--      :code="code_2"-->
  <!--      highlightjs-->
  <!--      label="Props"-->
  <!--      lang="javascript"-->
  <!--      theme="hybrid"-->
  <!--  />-->
  <props-details-table :props-data="props_data"/>
  <label class="form-label"> Example</label>
  <image-radio-input
      width="auto"
      padding="10px"
      :options="inline_options"
      is-inline="true"
      name="Inline Type"
      v-model="inline_value"
  />

  <VCodeBlock
      :code="inline_code_1"
      highlightjs
      label="Demo Code"
      lang="html"
      tabs="true"
      theme="hybrid"
  />
  <VCodeBlock
      :code="inline_code_2"
      highlightjs
      label="Inline radio options value"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <h6 class="fs-6 mb-3">Image Radio Button</h6>
  <image-radio-input
      width="100px"
      height="120px"
      max-img-width="100px"
      padding="5px"
      icon-size="35px"
      :options="image_options"
      name="Image Type"
      v-model="img_val"/>

  <VCodeBlock
      :code="image_code_1"
      highlightjs
      label="Demo Code"
      lang="html"
      tabs="true"
      theme="hybrid"
  />

  <VCodeBlock
      :code="image_code_2"
      highlightjs
      label="Image radio options value"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />

</template>

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

export default {
  name: "TestImageRadio",
  components: {PropsDetailsTable, ImageRadioInput, VCodeBlock},
  data() {
    return {
      inline_value: 'I',
      img_val: 'T-1',
      inline_options: [
        {label: "Total Item", val: "I",},
        {label: "Total Quantity", val: "Q",}
      ],
      image_options: [
        {
          label: "Test 1",
          val: "T-1",
          img_src: "https://img.freepik.com/free-psd/lotion-bottle-isolated-transparent-background_191095-25732.jpg?w=740&t=st=1721805623~exp=1721806223~hmac=39ac1e2503c0db7d1c2384a6c86a14cd78fbd164024380336afd2000b4dea1a8"
        },
        {
          label: "Test 2",
          val: "T-2",
          img_src: "https://as2.ftcdn.net/v2/jpg/02/59/56/37/1000_F_259563739_ruF5lL5EkMFuUrndilGktGZNTUsejCGR.jpg",
        },

      ],
      props_data: [
        {
          name: 'width',
          type: 'String',
          default_val: 'auto',
          details: 'Specified the width of the radio input container.'
        },
        {
          name: 'height',
          type: 'String',
          default_val: 'auto',
          details: 'Specified the height of the radio input container.'
        },
        {
          name: 'max-width',
          type: 'String',
          default_val: 'inherit',
          details: 'Maximum height of the containe.r'
        },
        {
          name: 'max-img-width',
          type: 'String',
          default_val: '50%',
          details: 'Maximum height of the image inside the container.'
        },
        {
          name: 'border-radius',
          type: 'String',
          default_val: '5px',
          details: 'Border radius the container.'
        },
        {
          name: 'margin',
          type: 'String',
          default_val: '0 15px 15px 0',
          details: 'Margin of the container.'
        },
        {
          name: 'padding',
          type: 'String',
          default_val: '10px',
          details: 'Padding of the container.'
        },
        {
          name: 'selector-top',
          type: 'String',
          default_val: '-5px',
          details: 'Selector icon top position.'
        },
        {
          name: 'selector-left',
          type: 'String',
          default_val: '-5px',
          details: 'Selector icon left position.'
        },
        {
          name: 'selector-color',
          type: 'String',
          default_val: '',
          details: 'Selector icon color.'
        },
        {
          name: 'icon-size',
          type: 'String',
          default_val: 'inherit',
          details: 'Selector icon size.'
        },
        {
          name: 'options',
          type: 'Array',
          default_val: '[ ]',
          details: 'Radio input field options.'
        },
        {
          name: 'is-inline',
          type: 'Boolean',
          default_val: 'false',
          details: 'Inline or absolute position of the select icon.'
        },
        {
          name: 'option-class',
          type: 'String',
          default_val: '',
          details: 'Optional class for the container.'
        },
        {
          name: 'label-border',
          type: 'String',
          default_val: '1px solid transparent',
          details: 'Optional class for the container.'
        },
      ],
      code_1: "import ImageRadioInput from \"@appsbd/vue3-appsbd-libs\";",
      code_2: "props: {\n" +
          "    width:{\n" +
          "      default: 'auto'\n" +
          "    },\n" +
          "    height:{\n" +
          "      default: 'auto'\n" +
          "    },\n" +
          "    maxWidth: {\n" +
          "      default: 'inherit'\n" +
          "    },\n" +
          "    maxImgWidth: {\n" +
          "      default: '50%'\n" +
          "    },\n" +
          "    borderRadius: {\n" +
          "      default: '5px'\n" +
          "    },\n" +
          "    margin:{\n" +
          "      default: '0 15px 15px 0'\n" +
          "    },\n" +
          "    padding:{\n" +
          "      default: '10px'\n" +
          "    },\n" +
          "    selectorTop:{\n" +
          "      default: '-5px;'\n" +
          "    },\n" +
          "    selectorLeft:{\n" +
          "      default: '5px;'\n" +
          "    },\n" +
          "    selectorColor:{\n" +
          "      default: ''\n" +
          "    },\n" +
          "    iconSize:{\n" +
          "      default: 'inherit;'\n" +
          "    },\n" +
          "    options:{\n" +
          "      default: []\n" +
          "    },\n" +
          "    isInline:{\n" +
          "      default: false\n" +
          "    },\n" +
          "    optionClass:{\n" +
          "      default: 'p-15'\n" +
          "    },\n" +
          "    labelBorder:{\n" +
          "      default: '1px solid transparent;'\n" +
          "    }\n" +
          "  },",
      inline_code_1: "  <image-radio-input \n" +
          "      width=\"auto\"\n" +
          "      padding=\"10px\"\n" +
          "      :options=\"inline_options\"\n" +
          "      is-inline=\"true\"\n" +
          "      name=\"Inline Type\"\n" +
          "      v-model=\"inline_value\"\n" +
          "  />",
      inline_code_2: "      inline_options: [\n" +
          "        {label: \"Total Item\", val: \"I\",},\n" +
          "        {label: \"Total Quantity\", val: \"Q\",}\n" +
          "      ],",
      image_code_1: "  <image-radio-input\n" +
          "      width=\"100px\"\n" +
          "      height=\"120px\"\n" +
          "      max-img-width=\"100px\"\n" +
          "      padding=\"5px\"\n" +
          "      icon-size=\"35px\"\n" +
          "      :options=\"image_options\"\n" +
          "      name=\"Image Type\"\n" +
          "      v-model=\"img_val\"/>",
      image_code_2: "      image_options: [\n" +
          "        {\n" +
          "          label: \"Test 1\",\n" +
          "          val: \"T-1\",\n" +
          "          img_src: \"https://img.freepik.com/free-psd/lotion-bottle-isolated-transparent-background_191095-25732.jpg?w=740&t=st=1721805623~exp=1721806223~hmac=39ac1e2503c0db7d1c2384a6c86a14cd78fbd164024380336afd2000b4dea1a8\"\n" +
          "        },\n" +
          "        {\n" +
          "          label: \"Test 2\",\n" +
          "          val: \"T-2\",\n" +
          "          img_src: \"https://as2.ftcdn.net/v2/jpg/02/59/56/37/1000_F_259563739_ruF5lL5EkMFuUrndilGktGZNTUsejCGR.jpg\",\n" +
          "        },",
    }
  }
}
</script>

<style scoped lang="scss">

</style>