<template>
  <VCodeBlock
      :code="import_code"
      highlightjs
      label="Import"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <!--  <VCodeBlock-->
  <!--      :code="custom_field_props"-->
  <!--      highlightjs-->
  <!--      label="Props"-->
  <!--      lang="javascript"-->
  <!--      tabs="true"-->
  <!--      theme="hybrid"-->
  <!--  />-->
  <props-details-table :props-data="props_data"/>
  <Form class="">
    <label class="form-label"> Example</label>
    <div class="row">
      <custom-fields
          class="col-6"
          input-size="sm"
          :field-inputs="customFields"
          :custom-props="field_data"
      >
      </custom-fields>
    </div>
  </Form>
  <VCodeBlock
      :code="demo_code"
      highlightjs
      label="Demo"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <VCodeBlock
      :code="field_inputs"
      highlightjs
      label="Custom Fields field-inputs options"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
</template>
<script>
import {Form} from "vee-validate";
import CustomFields from "@/components/CustomFields.vue";
import VCodeBlock from '@wdns/vue-code-block';
import PropsDetailsTable from "./PropsDetailsTable.vue";

export default {
  name: "TestCustomField",
  components: {PropsDetailsTable, CustomFields, Form, VCodeBlock},
  props: {},
  data() {
    return {
      field_data: {},
      customFields: [
        {
          id: "1",
          label: "Test text field",
          tooltip: "Testing Date",
          is_required: "Y",
          is_disable: 'N',
          type: "T", // T=Textbox, N=Numeric, D=Date,C=Checkbox, S=Switch, R=Radio, W=Dropdown, E=Textarea, U=URL Input,I=Instruction, H=Hidden
          des: "Test Description",
          placeholder: "Test text field",
          is_pro: "A",
          res_class: "col-md-6",
          input_class: "",
          prefix: "test",
          postfix: "postfix"
        },
        {
          id: "2",
          label: "Test number field",
          tooltip: "",
          is_required: "Y",
          is_disable: 'N',
          type: "N", // T=Textbox, N=Numeric, D=Date,C=Checkbox, S=Switch, R=Radio, W=Dropdown, E=Textarea, U=URL Input,I=Instruction, H=Hidden
          placeholder: "Test text field",
          is_pro: "A",
          des: "Test Number description",
          res_class: "col-md-6",
          input_class: "",
        },
        {
          id: "6",
          label: "Test password field",
          tooltip: "",
          is_required: "Y",
          is_disable: 'N',
          type: "P", // T=Textbox, N=Numeric, D=Date,C=Checkbox, S=Switch, R=Radio, W=Dropdown, E=Textarea, U=URL Input,I=Instruction, H=Hidden
          placeholder: "Enter Password",
          is_pro: "A",
          des: "Test Password field",
          res_class: "col-md-6",
          input_class: "",
        },
        {
          id: "3",
          label: "Test Date",
          tooltip: "Testing Date",
          is_required: "Y",
          is_disable: 'N',
          type: "D", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          placeholder: "Test date field",
          is_pro: "A",
          des: "Test Number description",
          res_class: "col-md-6",
          input_class: "",
        },
        {
          id: "4",
          label: "Test Radio",
          tooltip: "Testing radio help text",
          is_required: "Y",
          is_disable: 'N',
          type: "R", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          val: "r-1",
          options: [
            {val: "r-1", title: "Radio 1"},
            {val: "r-2", title: "Radio 2"},
            {val: "r-3", title: "Radio 3"},
          ],
          des: "Test Radio Description",
          res_class: "col-md-6",
          input_class: "",
        },
        {
          id: "5",
          label: "Test single select dropdown",
          tooltip: "Simple Dropdown",
          is_required: "Y",
          is_disable: 'N',
          type: "W", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          val: 'test 1',
          options: [
            {val: "test 1", title: "Dropdown 1"},
            {val: "test 2", title: "Dropdown 2"},
            {val: "test 3", title: "Dropdown 3"},
          ],
          placeholder: "Dropdown placeholder",
          opt_limit: 1,
          des: "Test Dropdown Description",
          res_class: "col-md-6",
          input_class: "",
        },
        {
          id: "12",
          label: "Test multiple select dropdown",
          tooltip: "Multiple Dropdown",
          is_pro: 'R',
          is_required: "Y",
          is_disable: 'N',
          type: "W", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          val: ['test 1', 'test 4', 'test 5'],
          options: [
            {val: "test 1", title: "Dropdown 1"},
            {val: "test 2", title: "Dropdown 2"},
            {val: "test 3", title: "Dropdown 3"},
            {val: "test 4", title: "Dropdown 4"},
            {val: "test 5", title: "Dropdown 5"},
          ],
          placeholder: "Dropdown placeholder",
          opt_limit: 4,
          des: "Test Dropdown Description",
          res_class: "col-md-6",
          input_class: "",
        },
        {
          id: "11",
          label: "Url",
          tooltip: "https://example.com",
          placeholder: "Enter URL",
          is_required: "Y",
          is_disable: 'N',
          type: "U", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          des: "",
          res_class: "col-md-6",
          is_pro: "R",
          input_class: "",
        },
        {
          id: "7",
          label: "Text-area",
          tooltip: "Text area description",
          placeholder: "Text area placeholder",
          is_required: "Y",
          is_disable: 'N',
          type: "E", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          des: "Test Description",
          res_class: "col-md-12",
          input_class: "",
          height: '150px'
        },
        {
          id: "8",
          label: "Switch",
          tooltip: "Testing switch",
          is_required: "Y",
          is_disable: 'N',
          type: "S", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          val: "Y",
          true_val: "Y",
          false_val: "N",
          is_pro: "R",
          des: "Switch button description",
          res_class: "col-md-6",
          input_class: "",
        },
        {
          id: "9",
          label: "Check Box",
          tooltip: "Test checkbox",
          is_required: "Y",
          is_disable: 'N',
          is_pro: 'A',
          type: "C", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          val: ["Check 1", "Check 3"],
          options: [
            {val: "Check 1", title: "Check 1"},
            {val: "Check 2", title: "Check 2"},
            {val: "Check 3", title: "Check 3"},
            {val: "Check 4", title: "Check 4"},
          ],
          opt_limit: 3,
          des: "Test checkbox description",
          res_class: "col-md-6",
          input_class: "",
        },
        {
          id: "10",
          label: "Hidden Field",
          tooltip: "",
          is_required: "Y",
          type: "H", //T=Textbox,N=Numeric,D=Date,S=Switch,R=Radio,W=Dropdown,E=Text/Instruction,U=URL Input
          des: "",
        },
      ],
      import_code: "import CustomFields from \"@appsbd/vue3-appsbd-libs\";",
      props_data: [{
        name: 'field-inputs',
        type: 'Array',
        default_val: '[ ]',
        details: 'Array of object which will use to build form with given specific fields.'
      }, {
        name: 'input-size',
        type: 'String',
        default_val: 'sm',
        details: 'Specify the size for all form fields.'
      }, {
        name: 'custom-props',
        type: 'Object',
        default_val: '{ }',
        details: 'It will bind the custom field data in the parent component'
      }],
      custom_field_props: "  props: {\n" +
          "    fieldInputs: {\n" +
          "      type: Array,\n" +
          "      default: [],\n" +
          "    },\n" +
          "    inputSize: {\n" +
          "      type: String,\n" +
          "      default: 'sm',\n" +
          "    },\n" +
          "    customProps: {\n" +
          "      type: Object,\n" +
          "      default: {},\n" +
          "    },\n" +
          "  },",
      demo_code: "  <Form class=\"\">\n" +
          "    <div class=\"row\">\n" +
          "      <!--  custom-props will dynamically bind the data from the CustomFields input field.\n" +
          "             We have to define the 'field_data' inside the data option. 'class' is a attribute field.\n " +
          "             If the res_class is absent then the class value will apply as a global responsive class the input fields'-->\n" +
          "      <custom-fields\n" +
          "          class=\"col-6\"\n" +
          "          input-size=\"md\"\n" +
          "          :field-inputs=\"customFields\"\n" +
          "          :custom-props=\"field_data\"\n" +
          "      >\n" +
          "      </custom-fields>\n" +
          "    </div>\n" +
          "  </Form>",
      field_inputs: "customFields: [\n" +
          "        {\n" +
          "          id: \"1\", // Unique id for each input fields\"\n" +
          "          label: \"Test text field\", // Label for v-validate\"\n" +
          "          help_text: \"Testing Date\", // Text to show in the tooltip \"\n" +
          "          is_required: \"Y\",// To set the input field as required, Default (N) \"\n" +
          "          type: \"T\", // T=Textbox,P=Password, N=Numeric, D=Date,C=Checkbox, S=Switch, R=Radio, W=Dropdown, E=Textarea, U=URL Input, H=Hidden\"\n" +
          "          des: \"Test Description\",// Input field description \"\n" +
          "          placeholder: \"Test text field\",// Placeholder text \"\n" +
          "          is_pro: \"A\",// Pro version option (R='Required',N='Not for pro',A='Pro with activated'),Default ('N') \"\n" +
          "          res_class: \"col-md-6\",// Responsive class  \"\n" +
          "          input_class: \"\",// Input field class, Default (form-control) \"\n" +
          "          prefix: \"test\",// Input field left side text \"\n" +
          "          postfix: \"postfix\", // Input field right side text \\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"2\",\n" +
          "          label: \"Test number field\",\n" +
          "          help_text: \"\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"N\",\n" +
          "          placeholder: \"Test text field\",\n" +
          "          is_pro: \"A\",\n" +
          "          des: \"Test Number description\",\n" +
          "          res_class: \"col-md-6\",\n" +
          "          input_class: \"\",\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"6\",\n" +
          "          label: \"Test password field\",\n" +
          "          help_text: \"\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"P\",\n" +
          "          placeholder: \"Enter Password\",\n" +
          "          is_pro: \"A\",\n" +
          "          des: \"Test Password field\",\n" +
          "          res_class: \"col-md-6\",\n" +
          "          input_class: \"\",\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"3\",\n" +
          "          label: \"Test Date\",\n" +
          "          help_text: \"Testing Date\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"D\", \n" +
          "          placeholder: \"Test Date field\",\n" +
          "          is_pro: \"A\",\n" +
          "          des: \"Test Number description\",\n" +
          "          res_class: \"col-md-6\",\n" +
          "          input_class: \"\",\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"4\",\n" +
          "          label: \"Test Radio\",\n" +
          "          help_text: \"Testing radio help text\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"R\", \n" +
          "          val: \"r-1\",// Default value. Using for Radio, Switch, Dropdown and Checkbox\n" +
          "          options: [\n" +
          "            {val: \"r-1\", title: \"Radio 1\"},\n" +
          "            {val: \"r-2\", title: \"Radio 2\"},\n" +
          "            {val: \"r-3\", title: \"Radio 3\"},\n" +
          "          ],// Options that have to show. Using in Radio, Dropdown and Checkbox \n" +
          "          des: \"Test Radio Description\",\n" +
          "          res_class: \"col-md-6\",\n" +
          "          input_class: \"\",\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"5\",\n" +
          "          label: \"Test Dropdown\",\n" +
          "          help_text: \"Simple Dropdown\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"W\",\n" +
          "          options: [\n" +
          "            {val: \"test\", title: \"Dropdown 1\"},\n" +
          "            {val: \"Select\", title: \"Dropdown 2\"},\n" +
          "            {val: \"Test 3\", title: \"Dropdown 3\"},\n" +
          "          ],\n" +
          "          placeholder: \"Dropdown placeholder\",\n" +
          "          opt_limit: 2,// Limit of selecting options. Using in Dropdown and Checkbox \n" +
          "          des: \"Test Dropdown Description\",\n" +
          "          res_class: \"col-md-6\",\n" +
          "          input_class: \"\",\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"11\",\n" +
          "          label: \"Url\",\n" +
          "          help_text: \"https://example.com\",\n" +
          "          placeholder: \"Enter URL\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"U\", \n" +
          "          des: \"\",\n" +
          "          res_class: \"col-md-6\",\n" +
          "          is_pro: \"R\",\n" +
          "          input_class: \"\",\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"7\",\n" +
          "          label: \"Text-area\",\n" +
          "          help_text: \"Text area description\",\n" +
          "          placeholder: \"Text area placeholder\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"E\", \n" +
          "          des: \"Test Description\",\n" +
          "          res_class: \"col-md-12\",\n" +
          "          input_class: \"\",\n" +
          "          height: '150px'\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"8\",\n" +
          "          label: \"Switch\",\n" +
          "          help_text: \"\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"S\", \n" +
          "          val: \"Y\",\n" +
          "          true_val: \"Y\",// Value will set 'Y' for true value\n" +
          "          false_val: \"N\",// Value will set 'N' for false value\n" +
          "          des: \"Switch button description\",\n" +
          "          res_class: \"col-md-6\",\n" +
          "          input_class: \"\",\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"9\",\n" +
          "          label: \"Check Box\",\n" +
          "          help_text: \"\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"C\", \n" +
          "          val: [\"Check 1\", \"Check 3\"],\n" +
          "          options: [\n" +
          "            {val: \"Check 1\", title: \"Check 1\"},\n" +
          "            {val: \"Check 2\", title: \"Check 2\"},\n" +
          "            {val: \"Check 3\", title: \"Check 3\"},\n" +
          "            {val: \"Check 4\", title: \"Check 4\"},\n" +
          "          ],\n" +
          "          opt_limit: 3,\n" +
          "          des: \"\",\n" +
          "          res_class: \"col-md-6\",\n" +
          "          input_class: \"\",\n" +
          "        },\n" +
          "        {\n" +
          "          id: \"10\",\n" +
          "          label: \"Hidden Field\",\n" +
          "          help_text: \"\",\n" +
          "          is_required: \"Y\",\n" +
          "          type: \"H\", \n" +
          "          des: \"\",\n" +
          "        },\n" +
          "      ]"
    };
  },
};
</script>

<style scoped lang="scss"></style>
