<template>
  <div class="container-fluid mb-5">
    <div class="row mt-5">
      <div class="col-12">
        <ul class="nav nav-pills nav-fill">
          <li v-for="(item, idx) in navItems" :key="`nav_pill_${idx}`" class="nav-item">
            <a :class="{ 'nav-link': true, 'active': item.caption == selectedNavItem.caption }" aria-current="page"
               href="javascript:;" @click="selectedNavItem = item">{{ item.caption }}</a>
          </li>
        </ul>

        <input v-model="inputQuery" class="form-control mt-4" placeholder="Search component..." type="text"
               name="query" />
      </div>
    </div>
    <template v-for="(input, idx) in filteredInputList">
      <div :key="`visible_input_${idx}`" class="row mt-5">
        <div class="col-12">
          <h1 class="display-4">{{ input.name }}</h1>
          <p>{{ input.description }}</p>
        </div>
      </div>
      <div v-for="(instance, idxLower) in input.instances" :key="`visible_instance_${idx}_${idxLower}`" class="row mt-4">
        <div v-show="instance.description" class="col-12">
          <p>{{ instance.description }}</p>
        </div>
        <div class="col-5">
          <code-preview :code="generateImplementationCode(input.tag, instance.props)"></code-preview>
        </div>
        <div class="col-4">
          <component :is="input.component" v-bind="instance.props" v-model="instance.value"></component>
        </div>
        <div v-show="instance.value !== '' && instance.value !== undefined" class="col-3 text-left">
          <strong>Value:</strong>
          <p class="small value-render"><pre>{{ instance.value }}</pre></p>
        </div>
      </div>
      <div v-if="input.propDef" :key="`prop_def_${idx}`" class="row mt-5">
        <div class="col-12">
          <h5>{{ input.name }} options</h5>
          <table class="table table-bordered table-borderless table-striped">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Type</th>
                <th scope="col">Description</th>
                <th scope="col">Default</th>
                <th scope="col">Values</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, idxPropDef) in input.propDef" :key="`prop_def_${idx}_${idxPropDef}`">
                <td>{{ item.name }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.description }}</td>
                <td>{{ item.default }}</td>
                <td>{{ item.values }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import CodePreview from './components/CodePreview';

import {
  inputText,
  inputDate,
  inputTextarea,
  inputSelect,
  inputCheckbox,
  keyValueTable,
  inputSearch,
  htmlEditor,
  inputAttachment,
  inputQrcode,
  inputBarcode,
  inputMap,
  actions,
  advancedFilter,
  userFilter,
  signature,
  document,
  inputScan,
  multipleSelect,
  comment,
  todo,
  floorPlanner,
  reportDefinition,
  reportRendering,
  extraDataRetrievalTable,
  formBuilder,
  colorPickerList,
  formRender,
  fieldRender
} from './index';

import { filterType, condition } from './types';
import { 
  usersList, 
  formRenderInstance, 
  formBuilderInstance, 
  colorPickerListInstance, 
  inputTextInstance,
  textareaInstance,
  selectInstance,
  fieldRenderInstance
} from './tools/data'

const multipleCheckboxOptions = [
  {
    title: 'Vue',
    itemKey: 'vueJs',
    selected: false
  },
  {
    title: 'Angular',
    itemKey: 'angularJs',
    selected: false
  },
  {
    title: 'React',
    itemKey: 'reactJs',
    selected: true
  },
]

export default {
  components: {
    CodePreview,
    inputText,
    inputDate,
    inputTextarea,
    inputSelect,
    inputCheckbox,
    keyValueTable,
    inputSearch,
    htmlEditor,
    inputAttachment,
    inputQrcode,
    inputBarcode,
    inputMap,
    actions,
    advancedFilter,
    signature,
    document,
    formBuilder,
    colorPickerList,
    formRender,
    fieldRender
  },
  data() {
    return {
      inputQuery: '',
      searchQuery: '',
      debounceTimer: null,
      navItems: [
        {
          caption: 'All',
          filter: '*',
        },
        {
          caption: 'Basic',
          filter: ['basic'],
        },
        {
          caption: 'Files',
          filter: ['files'],
        },
        {
          caption: 'Scanners',
          filter: ['scanner'],
        },
      ],

      selectedNavItem: {
        caption: 'All',
        filter: '*',
      },

      inputList: [
        formRenderInstance,
        formBuilderInstance,
        colorPickerListInstance,
        inputTextInstance,
        textareaInstance,
        selectInstance,
        fieldRenderInstance,
        {
          name: 'Date',
          description: 'A date selection input.',
          component: inputDate,
          tag: 'input-date',
          tags: ['text', 'input', 'date', 'time', 'basic'],
          instances: [
            {
              description: '',
              props: {
                caption: 'Date',
                description: 'Please select a date',
              },
              value: '2021-06-10',
            },
            {
              description: '',
              props: {
                caption: 'Timestamp Date',
                description: 'Please select a date',
                useTimestamp: true
              },
              value: 1714028510,
            },
            {
              description:
                'The options prop is directly passed to the pickaday instance',
              props: {
                caption: 'Start date',
                description: 'The start date cannot be in the past',
                options: { minDate: new Date() },
              },
              value: '2021-06-10',
            },
            {
              description: 'Disabled state:',
              props: {
                caption: 'Start date',
                description: 'Please select a start date',
                disabled: true,
              },
              value: '2021-06-10',
            },
            {
              description: 'Custom date format',
              props: {
                caption: 'Date',
                description: 'Please select a date',
                format: 'DD-MM-YYYY',
                minDate: '2024-01-01',
                maxDate: '2024-05-01',
              },
              value: '2021-06-10',
            },
            {
              description: 'Custom date constrains',
              props: {
                caption: 'Date',
                description: 'Please select a date',
                minDate: '2024-01-01',
                maxDate: '2024-05-01',
              },
              value: '2021-06-10',
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: '',
            },
            {
              name: 'description',
              description: 'The field description text',
              type: 'String',
              values: '',
            },
            {
              name: 'options',
              description:
                'Optional parameters that are passed directly to the pickaday instance',
              type: 'Object',
              values: '',
            },
            {
              name: 'disabled',
              description: 'Specify if the field should be read only',
              type: 'Boolean',
              values: '',
              default: 'false',
            },
            {
              name: 'useTimestamp',
              description: 'Specify whether the component should treat the received and emitted values as timestamps.',
              type: 'Boolean',
              values: 'true | false',
              default: 'false',
            },
            {
              name: 'minDate',
              description: 'Restriction of the minimum date',
              type: 'String',
              values: '',
            },
            {
              name: 'maxDate',
              description: 'Restriction of the maximum date',
              type: 'String',
              values: '',
            },
          ],
        },
        {
          name: 'Checkbox',
          description: 'A checkbox toggle.',
          component: inputCheckbox,
          tag: 'input-checkbox',
          tags: ['text', 'input', 'checkbox', 'basic'],
          instances: [
            {
              description: '',
              props: {
                caption: 'Enable feature',
                description: 'Toggle the switch to enable',
              },
              value: false,
            },
            {
              description:
                'The text can also be on the right hand side of the switch',
              props: {
                caption: 'Enable feature',
                description: 'Toggle the switch to enable',
                captionAside: true,
                switchType: 'danger',
              },
              value: false,
            },
            {
              description:
                'Custom label values set to "True/False"',
              props: {
                caption: 'Enable feature',
                description: 'Toggle the switch to enable',
                customLabel1: 'On',
                customLabel2: 'Off',
                switchType: 'primary',
              },
              value: false,
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: '',
            },
            {
              name: 'description',
              description: 'The field description text',
              type: 'String',
              values: '',
            },
            {
              name: 'captionAside',
              description: 'Moves the text to the right hand side of the switch',
              type: 'Boolean',
              default: false,
              values: '',
            },
            {
              name: 'customLabel1',
              description: 'The label displayed when the switch is ON',
              type: 'String',
              default: 'Yes',
              values: '',
            },
            {
              name: 'customLabel2',
              description: 'The label displayed when the switch is OFF',
              type: 'String',
              default: 'No',
              values: '',
            },
          ],
        },
        {
          name: 'Key-value table',
          description: 'A key-value table with select.',
          component: keyValueTable,
          tag: 'key-value-table',
          tags: ['text', 'input', 'table', 'basic', 'key-value'],
          instances: [
            {
              description: 'The single select variant, no label',
              props: {
                options: [
                  { text: 'Type 1', value: 'type1' },
                  { text: 'Type 2', value: 'type2' },
                ],
                fields: [{ label: 'Type' }, { label: 'Item name' }],
                placeholder: 'Select...',
                editable: true,
              },
              value: [
                { key: 'type1', value: 'Item1' },
                { key: 'type2', value: 'Item2' },
                { key: 'type1', value: 'Item3' },
              ],
            },
            {
              description: 'The single select variant',
              props: {
                title: 'Simple key-value table',
                subtitle: 'Add values in table',
                options: [
                  { text: 'Type 1', value: 'type1' },
                  { text: 'Type 2', value: 'type2' },
                ],
                fields: [{ label: 'Type' }, { label: 'Item name' }],
                placeholder: 'Select...',
                editable: true,
              },
              value: [
                { key: 'type1', value: 'Item1' },
                { key: 'type2', value: 'Item2' },
                { key: 'type1', value: 'Item3' },
              ],
            },
            {
              description: 'The two select variant',
              props: {
                title: 'Key-value with two selects',
                subtitle: 'Add values in table',
                options: [
                  { text: 'Type 1', value: 'type1' },
                  { text: 'Type 2', value: 'type2' },
                ],
                fields: [
                  { label: 'Type' },
                  { label: 'Category' },
                  { label: 'Item name' },
                ],
                placeholder: 'Select...',
                editable: true,
                secondList: true,
                secondOptions: [
                  { text: 'Cat 1', value: 'c1' },
                  { text: 'Cat 2', value: 'c2' },
                ],
                secondPlaceholder: 'Pick...',
              },
              value: [
                { key: 'type1', value: 'Item1', secondKey: 'c2' },
                { key: 'type2', value: 'Item2', secondKey: 'c1' },
                { key: 'type1', value: 'Item3', secondKey: 'c1' },
              ],
            },
            {
              description: 'The date input variant',
              props: {
                title: 'Key-value with date value',
                subtitle: 'Add values in table',
                options: [
                  { text: 'Type 1', value: 'type1' },
                  { text: 'Type 2', value: 'type2' },
                ],
                fields: [{ label: 'Type' }, { label: 'Value' }],
                placeholder: 'Select...',
                editable: true,
                inputType: 'date',
              },
              value: [
                { key: 'type2', value: '2021-10-13' },
                { key: 'type1', value: '2021-10-21' },
              ],
            },
            {
              description: 'The date input variant with timestamp',
              props: {
                title: 'Key-value with date value as timestamp',
                subtitle: 'Add values in table',
                options: [
                  { text: 'Type 1', value: 'type1' },
                  { text: 'Type 2', value: 'type2' },
                ],
                fields: [{ label: 'Type' }, { label: 'Value' }],
                placeholder: 'Select...',
                editable: true,
                inputType: 'date',
                useTimestamp: true
              },
              value: [
                { key: 'type2', value: 1577829600 },
              ],
            },
            {
              description: 'The search variant, no label',
              props: {
                searchable: true,
                searchDataset: { 'test 1 [ERNPXA]': 'test 1', 'test 2 [YMTHWY]': 'test 2', 'test 3 [RKRTWA]': 'test 3' },
                fields: [{ label: 'Type' }, { label: 'Item name' }],
                placeholder: 'Select...',
                editable: true,
                valueFormatter: (val) => typeof val === 'number' ? val.toFixed(2) : val
              },
              value: [{ 'key': 'test 2 [YMTHWY]', 'value': 'test 2' }],
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: ''
            },
            {
              name: 'description',
              description: 'The field description text',
              type: 'String',
              values: '',
            },
            {
              name: 'title',
              description: 'The table title text',
              type: 'String',
              values: '',
              default: 'Id',
            },
            {
              name: 'subtitle',
              description: 'The table subtitle text',
              type: 'String',
              values: '',
              default: 'Add values',
            },
            {
              name: 'placeholder',
              description: 'The tables first select empty option text',
              type: 'String',
              values: '',
              default: 'Select option',
            },
            {
              name: 'fields',
              description: 'The table column fields',
              type: 'Array',
              values: '',
            },
            {
              name: 'options',
              description: 'The first select options',
              type: 'Array',
              values: '',
            },
            {
              name: 'editable',
              description:
                'Enables the ability to add or remove items from the table',
              type: 'Boolean',
              values: '',
              default: 'true',
            },
            {
              name: 'secondList',
              description: 'Adds a second select',
              type: 'Boolean',
              values: '',
              default: 'false',
            },
            {
              name: 'secondOptions',
              description: 'The second select options',
              type: 'Array',
              values: '',
            },
            {
              name: 'secondPlaceholder',
              description: 'The tables second select empty option text',
              type: 'String',
              values: '',
              default: 'Select option',
            },
            {
              name: 'keyValue',
              description:
                'Save data as objects with literal key value properties or with dynamic key property',
              type: 'Boolean',
              values: '',
              default: 'true',
            },
            {
              name: 'inputType',
              description: 'Choose the type of input',
              type: 'String',
              values: 'text | numeric | date',
              default: 'text',
            },
            {
              name: 'editText',
              description: 'Choose the text for the edit mode toggle when editing is disabled',
              type: 'String',
              values: '',
              default: 'Edit',
            },
            {
              name: 'saveText',
              description: 'Choose the text for the edit mode toggle when editing is enabled',
              type: 'String',
              values: '',
              default: 'Save',
            },
            {
              name: 'cancelText',
              description: 'Choose the text for the cancel button',
              type: 'String',
              values: '',
              default: 'Cancel',
            },
            {
              name: 'searchable',
              description: 'Use the Search component instead of the first select',
              type: 'Boolean',
              values: '',
              default: 'false',
            },
            {
              name: 'searchDataset',
              description: 'The data through which to search',
              type: 'Object',
              values: '',
              default: '{}',
            },
            {
              name: 'valueInput',
              description: 'Choose whether to use the value input or not',
              type: 'Boolean',
              values: '',
              default: 'true',
            },
            {
              name: 'valueFormatter',
              description: 'Format the value input',
              type: 'Function',
              values: '',
              default: 'null',
            },
          ],
        },
        {
          name: 'Search',
          description: 'A basic search as you type component',
          component: inputSearch,
          tag: 'input-search',
          tags: ['text', 'input', 'search', 'basic'],
          instances: [
            {
              description: 'Basic search as you type usage with caption',
              props: {
                caption: 'Search',
                dataset: {
                  'First option': '1. first option',
                  'Second option': '2. second option',
                  'Third option': '3. Third option'
                }
              },
              value: 'First option',
            },
            {
              description: 'Basic search as you type usage without caption',
              props: {
                dataset: {
                  'First option': '1. first option',
                  'Second option': '2. second option',
                  'Third option': '3. Third option'
                },
                value: 'Second option'
              },
              value: 'Second option',
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: ''
            },
            {
              name: 'placeholder',
              description: 'The input placeholder text',
              type: 'String',
              values: '',
              default: 'Type your keyword'
            },
            {
              name: 'dataset',
              description: 'The data through which to search',
              type: 'String',
              values: ''
            },
            {
              name: 'clear',
              description: 'Clears result list each time it is changed to true',
              type: 'Boolean',
              values: ''
            },
          ]
        },
        {
          name: 'Html editor',
          description: 'A WYSIWYG style html editor',
          component: htmlEditor,
          tag: 'html-editor',
          tags: ['text', 'input', 'html', 'editor', 'htmlEditor'],
          instances: [
            {
              description: 'The two select variant',
              props: {},
              value: '<h3>My First Heading</h3><p>My first paragraph.</p>',
            },
          ],
        },
        {
          name: 'Attachment',
          description: 'A control that manages files and file uploads.',
          component: inputAttachment,
          tag: 'input-attachment',
          tags: ['text', 'input', 'files', 'attachment'],
          instances: [
            {
              description: '',
              props: {
              },
              value: [],
            },
            {
              description: '',
              props: {
                caption: 'Logo',
                description: 'Select a logo from your computer',
              },
              value: [
                {
                  url: 'https://previolet.s3.eu-west-1.amazonaws.com/c92306782/processed/2020/08/1203805-921544648-plan1.png',
                  name: 'Some fileaaaaaaaaaaaaaaaaaaaa.jpg'
                },
                {
                  url: 'https://previolet.s3.eu-west-1.amazonaws.com/c92306782/processed/2021/02/44731875-811666443-plan2.png',
                },
              ],
            },
            {
              description: 'The image size can also be increased',
              props: {
                caption: 'Logo',
                description: 'Select a logo from your computer',
                imageSize: '200px',
              },
              value: [
                {
                  url: 'https://previolet.s3.eu-west-1.amazonaws.com/c92306782/processed/2020/08/1203805-921544648-plan1.png',
                },
              ],
            },
            {
              description: 'The upload text can also be changed',
              props: {
                caption: 'Logo',
                uploadText: 'Select image',
              },
              value: [
                {
                  url: 'https://previolet.s3.eu-west-1.amazonaws.com/c92306782/processed/2020/08/1203805-921544648-plan1.png',
                },
              ],
            },
            {
              description: 'The ability to upload or remove files can be disabled',
              props: {
                caption: 'Logo',
                uploadText: 'Select image',
                disabled: true,
              },
              value: [
                {
                  url: 'https://previolet.s3.eu-west-1.amazonaws.com/c92306782/processed/2020/08/1203805-921544648-plan1.png',
                },
                {
                  url: 'https://previolet.s3.eu-west-1.amazonaws.com/c92306782/processed/2021/02/44731875-811666443-plan2.png',
                },
              ],
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: '',
            },
            {
              name: 'description',
              description: 'The field description text',
              type: 'String',
              values: '',
            },
            {
              name: 'maxAttachments',
              description: 'The maximum number of allowed attachments',
              type: 'Number',
              values: '',
              default: '0 (no limit)',
            },
            {
              name: 'maxSize',
              description: 'The maximum size in Kb for an attached document',
              type: 'Number',
              values: '',
              default: '0 (no limit)',
            },
            {
              name: 'allowedExtensions',
              description:
                'Specify a list of allowed file extensions (eg: ["jpg", "pdf"])',
              type: 'Array',
              values: '',
              default: '',
            },
            {
              name: 'uploadText',
              description: 'The text to be displayed in the upload area',
              type: 'String',
              values: '',
              default: 'Drag and drop or choose a file to upload',
            },
            {
              name: 'disabled',
              description: 'Disables the ability to upload and remove files',
              type: 'Boolean',
              default: 'false',
            },
          ],
        },
        {
          name: 'QR Code Scanner',
          description: 'A control that allows scanning QR codes.',
          component: inputQrcode,
          tag: 'input-qrcode',
          tags: ['qr', 'scanner'],
          instances: [
            {
              description: '',
              props: {
                caption: 'QR Code',
                description: 'Please scan a QR code',
              },
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: '',
            },
            {
              name: 'description',
              description: 'The field description text',
              type: 'String',
              values: '',
            },
            {
              name: 'continueAfterResult',
              description: 'Should scanning continue after a positive match',
              type: 'Boolean',
              values: '',
              default: 'false',
            },
            {
              name: 'autoStart',
              description: 'Should scanning start automatically or not',
              type: 'Boolean',
              values: '',
              default: 'true',
            },
          ],
        },
        {
          name: 'Barcode Scanner',
          description: 'A control that allows scanning standard barcodes.',
          component: inputBarcode,
          tag: 'input-barcode',
          tags: ['barcode', 'scanner'],
          instances: [
            {
              description: '',
              props: {
                caption: 'Barcode',
                description: 'Please scan a barcode',
              },
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: '',
            },
            {
              name: 'description',
              description: 'The field description text',
              type: 'String',
              values: '',
            },
            {
              name: 'continueAfterResult',
              description: 'Should scanning continue after a positive match',
              type: 'Boolean',
              values: '',
              default: 'false',
            },
            {
              name: 'autoStart',
              description: 'Should scanning start automatically or not',
              type: 'Boolean',
              values: '',
              default: 'true',
            },
            {
              name: 'readers',
              description: 'The list of readers to use in scanning',
              type: 'Array',
              values:
                'code_128_reader, ean_reader, ean_8_reader, code_39_reader, code_39_vin_reader, codabar_reader, upc_reader, upc_e_reader, i2of5_reader, 2of5_reader, code_93_reader',
              default: '["code_128_reader", "ean_reader"]',
            },
          ],
        },
        {
          name: 'Input Scanner',
          description: 'A control that allows scanning.',
          component: inputScan,
          tag: 'input-barcode',
          tags: ['barcode', 'scanner'],
          instances: [
            {
              description: '',
              props: {
                caption: 'Barcode',
                description: 'Please scan a barcode',
                placeholder: 'Scan QR Code...'
              },
              value: '123',
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: '',
            },
            {
              name: 'description',
              description: 'The field description text',
              type: 'String',
              values: '',
            },
          ],
        },
        {
          name: 'Extra Data Retrieval Table',
          description: 'A versatile table component for collecting user input with various input types including yes/no radio buttons, numeric inputs, text fields, textareas, dates, and attachments. Supports combined input types and customizable configuration.',
          component: extraDataRetrievalTable,
          tag: 'extra-data-retrieval-table',
          tags: ['extra', 'data', 'retrieval', 'table'],
          instances: [
            {
              description: 'Table with Yes/No input selection',
              props: {
                title: 'Approval Table',
                description: 'Select Yes or No for each item listed below.',
                type: 'yes-no',
                config: {
                  columnTitle: 'Item Name',
                  columnValue1: 'Approved',
                  labelYes: 'Yes',
                  labelNo: 'No',
                },
              },
              value: [
                { id: 1, item: { id: 1, title: 'Budget Approval' } },
                { id: 2, item: { id: 2, title: 'Project Approval' }, value: false },
                { id: 3, item: { id: 3, title: 'Hiring Approval' } },
              ],
            },
            {
              description: 'Table with Yes/No input selection with default value',
              props: {
                title: 'Approval Table',
                description: 'Select Yes or No for each item listed below.',
                type: 'yes-no',
                defaultValue1: true,
              },
              value: [
                { id: 4, item: { id: 1, title: 'Budget Approval' } },
                { id: 5, item: { id: 2, title: 'Project Approval' }, value: false },
                { id: 6, item: { id: 3, title: 'Hiring Approval' } },
              ],
            },
            {
              description: 'Table with Numeric input field',
              props: {
                title: 'Budget Allocation Table',
                description: 'Enter the allocated budget for each item.',
                type: 'numeric',
                config: {
                  columnTitle: 'Expense',
                  columnValue1: 'Amount',
                  placeholder1: 'Enter amount',
                },
              },
              value: [
                { id: 4, item: { id: 1, title: 'Marketing' }, value: 5000 },
                { id: 5, item: { id: 2, title: 'Development' }, value: 15000 },
                { id: 6, item: { id: 3, title: 'Operations' } },
              ],
            },
            {
              description: 'Table with Numeric input field and Average',
              props: {
                title: 'Budget Allocation Table',
                description: 'Enter the allocated budget for each item.',
                type: 'numeric',
                config: {
                  columnTitle: 'Expense',
                  columnValue1: 'Amount',
                  placeholder1: 'Enter amount',
                },
                displaySummaryAverage: true,
                displaySummaryCount: true,
              },
              value: [
                { id: 4, item: { id: 1, title: 'Marketing' }, value: 5000 },
                { id: 5, item: { id: 2, title: 'Development' }, value: 15000 },
                { id: 6, item: { id: 3, title: 'Operations' } , value: 2000},
              ],
            },
            {
              description: 'Table with Numeric input field and default value',
              props: {
                title: 'Budget Allocation Table',
                description: 'Enter the allocated budget for each item.',
                type: 'numeric',
                config: {
                  columnTitle: 'Expense',
                  columnValue1: 'Amount',
                  placeholder1: 'Enter amount',
                },
                defaultValue1: 100
              },
              value: [
                { id: 4, item: { id: 1, title: 'Marketing' }, value: 5000 },
                { id: 5, item: { id: 2, title: 'Development' } },
                { id: 6, item: { id: 3, title: 'Operations' } },
              ],
            },
            {
              description: 'Table with Text Input',
              props: {
                title: 'User Input Table',
                description: 'Enter text for each item in the list below.',
                type: 'text',
                config: {
                  columnTitle: 'Field Name',
                  columnValue1: 'Input',
                  placeholder1: 'Enter text here',
                },
              },
              value: [
                { id: 7, item: { id: 1, title: 'First Name' } },
                { id: 8, item: { id: 2, title: 'Last Name' }, value: 'Doe' },
                { id: 9, item: { id: 3, title: 'Email' } },
              ],
            },
            {
              description: 'Table with Text-Area Input',
              props: {
                title: 'Comments Table',
                description: 'Provide detailed comments for each item listed below.',
                type: 'textarea',
                config: {
                  columnTitle: 'Item',
                  columnValue1: 'Comments',
                  placeholder1: 'Enter comments here',
                },
              },
              value: [
                { id: 10, item: { id: 1, title: 'Feedback on Service' } },
                { id: 11, item: { id: 2, title: 'Suggestions for Improvement' }, value: 'Consider adding more staff.' },
                { id: 12, item: { id: 3, title: 'Additional Notes' } },
              ],
            },
            {
              description: 'Table with Date Input',
              props: {
                title: 'Event Schedule',
                description: 'Select dates for the following events.',
                type: 'date',
                config: {
                  columnTitle: 'Event',
                  columnValue1: 'Date',
                  placeholder1: 'Select event date',
                },
              },
              value: [
                { id: 13, item: { id: 1, title: 'Project Kickoff' }, value: '2024-03-25' },
                { id: 14, item: { id: 2, title: 'Mid-term Review' } },
                { id: 15, item: { id: 3, title: 'Final Presentation' } },
              ],
            },
            {
              description: 'Combined Yes/No and Text inputs',
              props: {
                title: 'Equipment Check',
                type: 'yes-no-text',
                config: {
                  columnTitle: 'Item',
                  columnValue1: 'Status',
                  columnValue2: 'Notes',
                  labelYes: 'OK',
                  labelNo: 'Issue',
                  placeholder2: 'Add note...'
                },
                defaultValue1: true,
                defaultValue2: 'Working fine'
              },
              value: [
                { 
                  id: 16, 
                  item: { id: 1, title: 'Printer' },
                  value: true,
                  value2: 'Working fine'
                },
                { 
                  id: 17, 
                  item: { id: 2, title: 'Scanner' },
                  value: false,
                  value2: 'Paper jam'
                }
              ]
            },
            {
              description: 'Combined Yes/No and Text inputs with print mode',
              props: {
                title: 'Equipment Check',
                type: 'yes-no-text',
                printMode: true,
                config: {
                  columnTitle: 'Item',
                  columnValue1: 'Status',
                  columnValue2: 'Notes',
                  labelYes: 'OK',
                  labelNo: 'Issue',
                  placeholder2: 'Add note...'
                }
              },
              value: [
                { 
                  id: 18, 
                  item: { id: 1, title: 'Printer' },
                  value: true,
                  value2: 'Working fine'
                },
                { 
                  id: 19, 
                  item: { id: 2, title: 'Scanner' },
                  value: false,
                  value2: 'Paper jam'
                }
              ]
            },
            {
              description: 'Table with Attachment inputs',
              props: {
                title: 'Document Requirements',
                description: 'Please upload the required documents for each item.',
                type: 'attachment',
                config: {
                  columnTitle: 'Document Type',
                  columnValue1: 'Files',
                  maxAttachments: 3,
                }
              },
              value: [
                { 
                  id: 20, 
                  item: { id: 1, title: 'ID Verification' },
                  value: [
                    {
                      url: 'https://previolet.s3.eu-west-1.amazonaws.com/c92306782/processed/2020/08/1203805-921544648-plan1.png',
                      name: 'Some file.jpg'
                    },
                    {
                      url: 'https://previolet.s3.eu-west-1.amazonaws.com/c92306782/processed/2021/02/44731875-811666443-plan2.png',
                    },
                  ]
                },
                { 
                  id: 21, 
                  item: { id: 2, title: 'Proof of Address' },
                  value: [],
                },
                { 
                  id: 22, 
                  item: { id: 3, title: 'Professional Certificates' },
                  value: [
                    {
                      url: 'https://example.com/cert1.pdf',
                      name: 'certificate1.pdf'
                    },
                  ]
                }
              ]
            },
            {
              description: 'Combined Numeric and Date inputs',
              props: {
                title: 'Project Budget Timeline',
                description: 'Enter budget amount and deadline for each project phase.',
                type: 'date-numeric',
                config: {
                  columnTitle: 'Project Phase',
                  columnValue2: 'Budget',
                  columnValue1: 'Deadline',
                  placeholder2: 'Enter budget',
                  placeholder1: 'Select deadline',
                }
              },
              value: [
                { 
                  id: 23, 
                  item: { id: 1, title: 'Planning Phase' },
                  value: '2024-06-15',
                  value2: 5000
                },
                { 
                  id: 24, 
                  item: { id: 2, title: 'Development Phase' },
                  value: '2024-08-30',
                  value2: 15000
                },
                { 
                  id: 25, 
                  item: { id: 3, title: 'Testing Phase' },
                  value: '2024-10-15',
                  value2: 7500
                }
              ]
            },
            {
              description: 'Table with Yes/No input selection and sorting function',
              props: {
                title: 'Approval Table',
                description: 'Select Yes or No for each item listed below.',
                type: 'yes-no',
                config: {
                  columnTitle: 'Item Name',
                  columnValue1: 'Approved',
                  labelYes: 'Yes',
                  labelNo: 'No',
                },
                allowSort: true,
              },
              value: [
                { id: 1, item: { id: 1, title: 'Budget Approval' } },
                { id: 2, item: { id: 2, title: 'Project Approval' }, value: false },
                { id: 3, item: { id: 3, title: 'Hiring Approval' } },
              ],
            },
          ],
          propDef: [
            {
              name: 'title',
              description: 'The title of the table component.',
              type: 'String',
              required: false,
              default: '',
            },
            {
              name: 'description',
              description: 'A brief description displayed above the table.',
              type: 'String',
              required: false,
              default: '',
            },
            {
              name: 'type',
              description: 'Specifies the input type(s) for the table rows. Can be a single type or a combination of two types separated by a hyphen.',
              type: 'String',
              required: true,
              values: ['yes-no', 'numeric', 'text', 'textarea', 'date', 'attachment', 'yes-no-text', 'numeric-date', 'yes-no-numeric', 'text-date', 'etc.'],
              default: '',
            },
            {
              name: 'value',
              description: 'The data entries for the table, containing items with IDs, titles, and optional initial values. For combined types, value2 property is used for the second input.',
              type: 'Array',
              required: true,
              default: [],
            },
            {
              name: 'config',
              description: 'Custom configuration for column headers, labels, and placeholders. For combined types, use columnValue1/columnValue2 and placeholder1/placeholder2.',
              type: 'Object',
              required: false,
              default: {
                columnTitle: 'Denumire',
                columnValue1: 'Based on type',
                columnValue2: 'Based on type',
                labelYes: 'Da',
                labelNo: 'Nu',
                placeholder1: 'Based on type',
                placeholder2: 'Based on type',
                attachmentCaption: 'Atașamente',
                maxAttachments: '',
                maxAttachmentsSize: 5,
                allowedAttachmentsExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx'],
              },
            },
            {
              name: 'defaultValue1',
              description: 'Specifies the default value to be assigned to each entry in the table if the value is not already set. Type depends on the input type.',
              type: ['Boolean', 'Number', 'String', 'Array'],
              required: false,
              defaultValue1: 'null',
            },
            {
              name: 'defaultValue2',
              description: 'Specifies the default value to be assigned to each entry in the table if the value is not already set. Type depends on the input type.',
              type: ['Boolean', 'Number', 'String', 'Array'],
              required: false,
              defaultValue2: 'null',
            },
            {
              name: 'showTotalRow',
              description: 'Controls whether a total row is displayed below the numeric input fields.',
              type: 'Boolean',
              required: false,
              default: 'true',
            },
            {
              name: 'printMode',
              description: 'Controls whether the table is displayed in print mode (read-only with simplified styling).',
              type: 'Boolean',
              required: false,
              default: 'false',
            },
            {
              name: 'allowSort',
              description: 'Allows the table rows to the sorted',
              type: 'Boolean',
              required: false,
              default: 'false',
            },
          ],
        },
        {
          name: 'Map',
          description: 'An input for map related data.',
          component: inputMap,
          tag: 'input-map',
          tags: ['map'],
          instances: [
            {
              description: 'Map in point mode with custom width and height',
              props: {
                mode: 'point',
                height: '150px',
                width: '370px',
              },
              value: [[47.180054619773195, 23.060817718505863]],
            },
            {
              description: 'Map in point mode with editing allowed',
              props: {
                mode: 'point',
                allow_edit: true,
              },
              value: [[51.5, -0.09]],
            },
            {
              description: 'Map in line mode and lang romanian',
              props: {
                mode: 'polyline',
                lang: 'ro'
              },
              value: [
                [46.862479852993204, 23.755187988281254],
                [47.180054619773195, 23.060817718505863],
              ],
            },
            {
              description: 'Map in line mode with editing allowed',
              props: {
                mode: 'polyline',
                allow_edit: true,
              },
              value: [
                [51.5, -0.09, {
                  iconUrl: '/waypoint.png',
                  iconSize: [38, 35],
                  iconAnchor: [20, 30],
                  popupAnchor: [-3, -76],
                  shadowurl: 'my-icon-shadow.png',
                  shadowsize: [68, 95],
                  shadowanchor: [22, 94],
                }],
                [51.51, -0.008],
                [51.51, -0.006],
              ],
            },
            {
              description: 'Map in poygon mode with custom colors',
              props: {
                mode: 'polygon',
                color: 'green',
                fill_color: 'red',
              },
              value: [
                [51.5, -0.09],
                [51.505, -0.1],
                [51.51, -0.008],
              ],
            },
            {
              description:
                'Map in polygon mode with editing allowed and a custom marker',
              props: {
                mode: 'polygon',
                allow_edit: true,
                marker_options: {
                  iconUrl: '/waypoint.png',
                  iconSize: [38, 35],
                  iconAnchor: [20, 30],
                  popupAnchor: [-3, -76],
                  shadowurl: 'my-icon-shadow.png',
                  shadowsize: [68, 95],
                  shadowanchor: [22, 94],
                },
              },
              value: [
                [51.5, -0.09],
                [51.505, -0.1],
                [51.51, -0.008],
              ],
            },
          ],
          propDef: [
            {
              name: 'mode',
              description: 'The mode for which the map should display',
              type: 'String',
              values: 'point, polyline, polygon',
              default: 'point',
            },
            {
              name: 'allow_edit',
              description: 'Should editing markers be posible',
              type: 'Boolean',
              default: 'false',
            },
            {
              name: 'hide_save',
              description: 'Should the save button be hidden',
              type: 'Boolean',
              default: 'false',
            },
            {
              name: 'trigger_save_on_change',
              description: 'Save automatically on changes',
              type: 'Boolean',
              default: 'false',
            },
            {
              name: 'color',
              description: 'Color of lines',
              type: 'String',
              values: 'hex codes/ color names (red, blue, green etc.)',
              default: 'blue',
            },
            {
              name: 'fill_color',
              description: 'Color inside area (for polygons)',
              type: 'String',
              values: 'hex codes/ color names (red, blue, green etc.)',
              default: 'color',
            },
            {
              name: 'marker_options',
              description: 'The options for displaying the map marker',
              type: 'Object',
              default: 'leaflet default marker options',
            },
            {
              name: 'width',
              description: 'The width of the map container',
              type: 'String',
              values: 'valid CSS size (400px, 1rem, auto etc.)',
              default: 'auto',
            },
            {
              name: 'height',
              description: 'The height of the map container',
              type: 'String',
              values: 'valid CSS size (400px, 1rem, auto etc.)',
              default: '350px',
            },
          ],
        },
        {
          name: 'Actions',
          description: 'A simple component for defining actions.',
          component: actions,
          tag: 'actions',
          tags: ['actions', 'input', 'basic'],
          instances: [
            {
              description: 'Action input with no action selected',
              props: {
                list: [
                  {
                    key: 'setare_valoare_initiala',
                    title: 'Seteaza valoare initiala',
                    type: 'text',
                    placeholder: 'Formula',
                    helperFields: [
                      {
                        key: 'sursa',
                        type: 'select',
                        options: [{ name: 'Selecteaza sursa', value: undefined }, { value: 'asset' }, { value: 'proces' }],
                        placeholder: 'Sursa'
                      },
                      {
                        key: 'camp',
                        type: 'text',
                        placeholder: 'Camp'
                      }
                    ]
                  },
                  {
                    key: 'setare_valoare_finala',
                    title: 'Seteaza valoare finala',
                    type: 'text'
                  },
                  {
                    key: 'suprascrie_valoare_initiala',
                    title: 'Valoarea finala o va suprascrie pe cea initiala',
                    type: 'boolean'
                  }
                ]
              },
              value: [],
            },
            {
              description: 'Instance with initials actions',
              props: {
                list: [
                  {
                    key: 'setare_valoare_initiala',
                    title: 'Seteaza valoare initiala',
                    type: 'text'
                  },
                  {
                    key: 'setare_valoare_finala',
                    title: 'Seteaza valoare finala',
                    type: 'text'
                  },
                  {
                    key: 'suprascrie_valoare_initiala',
                    title: 'Valoarea finala o va suprascrie pe cea initiala',
                    type: 'boolean'
                  }
                ],
                class_select: 'extra-class',
              },
              value: [
                {
                  key: 'setare_valoare_initiala',
                  value: 'test',
                },
                {
                  key: 'suprascrie_valoare_initiala',
                  value: true,
                },
              ],
            },
          ],
          propDef: [
            {
              name: 'list',
              description: 'Specify the list of possible actions',
              type: 'Object',
              default: [],
              values: 'Array of Objects which contain a key, a title and a type which should be either "text" or "boolean"'
            },
          ],
        },
        {
          name: 'Advanced filter',
          description: 'A simple component for defining filters.',
          component: advancedFilter,
          tag: 'advanced-filter',
          tags: ['filter', 'advanced'],
          instances: [
            {
              description: 'Condition filter with default props',
              props: {
                list: [
                  {
                    key: 'name',
                    name: 'Name',
                    type: filterType.text,
                    conditions: [condition.en.eq, condition.en.ne, condition.en.ns],
                  },
                  {
                    key: 'country',
                    name: 'Country',
                    values: (existingSelections) => { console.log('>>>', existingSelections); return ['Spain', 'Greece'] },
                    type: filterType.select,
                    conditions: [condition.en.eq, condition.en.ne, condition.en.ns],
                  },
                  {
                    key: 'price',
                    name: 'Price',
                    type: filterType.number,
                    conditions: [condition.en.eq, condition.en.ne, condition.en.lt, condition.en.gt, condition.en.ns],
                  },
                  {
                    key: 'status',
                    name: 'Status',
                    type: filterType.bool,
                    conditions: [condition.en.eq, condition.en.ne, condition.en.ns],
                  },
                  {
                    key: 'startDate',
                    name: 'Start Date',
                    type: filterType.date,
                    conditions: [condition.en.eq, condition.en.ne, condition.en.lt, condition.en.gt, condition.en.ns],
                  },
                  {
                    key: 'scan',
                    name: 'Scan',
                    type: filterType.scan,
                    conditions: [condition.en.eq],
                  },
                ]
              },
              value: []
            },
            {
              description: 'Condition filter with value and filter display',
              props: {
                displayFilters: true,
                list: [
                  {
                    key: 'name',
                    name: 'Name',
                    type: filterType.text,
                    conditions: [condition.en.eq, condition.en.ne],
                  },
                  {
                    key: 'country',
                    name: 'Country',
                    values: (existingSelections) => { console.log('>>>', existingSelections); return ['Spain', 'Greece'] },
                    type: filterType.select,
                    conditions: [condition.en.eq, condition.en.ne],
                  },
                  {
                    key: 'price',
                    name: 'Price',
                    type: filterType.number,
                    conditions: [condition.en.eq, condition.en.ne, condition.en.lt, condition.en.gt],
                  },
                  {
                    key: 'status',
                    name: 'Status',
                    type: filterType.bool,
                    conditions: [condition.en.eq, condition.en.ne],
                  },
                  {
                    key: 'startDate',
                    name: 'Start Date',
                    type: filterType.date,
                    conditions: [condition.en.eq, condition.en.ne, condition.en.lt, condition.en.gt],
                  },
                ]
              },
              value: [
                {
                  key: 'price',
                  precondition: 'and',
                  condition: 'eq',
                  value: '12.553'
                }
              ]
            },
            {
              description: 'Condition filter with romanian texts and savedFiltersList',
              props: {
                lang: 'ro',
                enableSaveFilter: true,
                list: [
                  {
                    key: 'name',
                    name: 'Name',
                    type: filterType.text,
                    conditions: [condition.ro.eq, condition.ro.ne],
                  },
                  {
                    key: 'country',
                    name: 'Country',
                    values: (existingSelections) => { console.log('>>>', existingSelections); return ['Spain', 'Greece'] },
                    type: filterType.select,
                    conditions: [condition.ro.eq, condition.ro.ne],
                  },
                  {
                    key: 'price',
                    name: 'Price',
                    type: filterType.number,
                    conditions: [condition.ro.eq, condition.ro.ne, condition.ro.lt, condition.ro.gt],
                  },
                  {
                    key: 'status',
                    name: 'Status',
                    type: filterType.bool,
                    conditions: [condition.ro.eq, condition.ro.ne],
                  },
                  {
                    key: 'startDate',
                    name: 'Start Date',
                    type: filterType.date,
                    conditions: [condition.ro.eq, condition.ro.ne, condition.ro.lt, condition.ro.gt],
                  },
                ],
                savedFiltersList: [ 
                  {'name': 'Filtru nume egal cu Ana si nume egal cu Pop', fd:[{ 'key': 'name', 'value': 'Ana', 'condition': 'eq', 'precondition': 'and' }, { 'key': 'name', 'value': 'Pop', 'condition': 'eq', 'precondition': 'and' }]},
                  {'name': 'Filtru pret mai mic decat 50', fd:[{ 'key': 'price', 'value': '50', 'condition': 'lt', 'precondition': 'and' }] }
                ]
              },
              value: []
            }
          ],
          propDef: [
            {
              name: 'list',
              description: 'The list of possible fields and conditions',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'value',
              description: 'The array of filters',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'displayFilters',
              description: 'A flag to display the filters as individual cards',
              type: 'Boolean',
              default: false,
              values: ''
            },
            {
              name: 'lang',
              description: 'The language used in the component',
              type: 'String',
              default: 'en',
              values: 'en | ro'
            },
            {
              name: 'savedFiltersList',
              type: 'Array',
              default: [],
              description: 'The list of filters that have been saved by the user',
            }
          ],
        },
        {
          name: 'User filter',
          description: 'A simple component for defining user filters.',
          component: userFilter,
          tag: 'user-filter',
          tags: ['filter', 'advanced', 'user'],
          instances: [
            {
              description: 'User filter with default props',
              props: {
                list: usersList,
              },
              value: [],
            },
            {
              description: 'Disabled user filter',
              props: {
                list: usersList,
                disabled: true
              },
              value: [],
            },
            {
              description: 'User filter with different caption, pre-selected list, maxSelection and dropup',
              props: {
                caption: 'Select Users',
                type: 'primary',
                list: usersList,
                maxSelection: 3,
                dropdownPosition: 'dropup'
              },
              value: [
                {
                  id: 'u1'
                },
              ],
            }
          ],
          propDef: [
            {
              name: 'caption',
              description: "The filter's caption",
              type: 'string',
              default: 'Assign',
              values: ''
            },
            {
              name: 'searchPlaceholder',
              description: "The filter's search placeholder",
              type: 'string',
              default: 'Search User...',
              values: ''
            },
            {
              name: 'type',
              description: "The filter's button type",
              type: 'string',
              default: 'light',
              values: 'Any valid bootstrap button type'
            },
            {
              name: 'list',
              description: "The filter's user list",
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'disabled',
              description: 'Specify if the select should be disabled',
              type: 'Boolean',
              default: false,
              values: ''
            },
            {
              name: 'maxSelection',
              type: 'Number',
              default: Infinity,
              description: 'Specifies the maximum number of users that can be selected. If set to 1, only one user can be selected at a time.',
              values: ''
            },
            {
              name: 'dropdownPosition',
              type: 'String',
              default: 'dropdown',
              description: 'Specifies the dropdown-menu drop position.',
              values: ''
            }
          ],
        },
        {
          name: 'Comment',
          description: 'User can add comment and make reply on it',
          component: comment,
          tag: 'comment',
          tags: ['comment'],
          instances: [
            {
              description: 'Comment box with default props',
              props: {
                currentUserData: { id: '2', name: 'Jon Jones', email: 'viorel.dram@gmail.com' },
              },
              values: [],
            },
            {
              description: 'Comment box with disable reply and different value for addCommentText prop',
              props: {
                currentUserData: { id: '2', name: 'Jon Jones', email: 'viorel.dram@gmail.com' },
                list: [{
                  id: '0',
                  user: { id: '0', name: 'Ronda Rousey', email: 'ronda.rousey@gmail.com' },
                  comment: 'Hello world',
                  date: '2024-02-01T09:19:00.247Z'
                },],
                allowReply: false,
                addCommentText: 'Add your comment'
              },
              values: [],
            },
            {
              description: 'Comment box with comments',
              props: {
                currentUserData: { username: 'Jon Jones', email: 'viorel.dram@gmail.com' },
                list: [
                  {
                    id: '0',
                    user: { id: '0', name: 'Ronda Rousey', email: 'ronda.rousey@gmail.com' },
                    comment: 'Hey guys, how are you ?',
                    date: '2024-01-31T12:19:00.247Z'
                  },
                  {
                    id: '1',
                    user: { id: '1', name: 'Khabib Nurmagomedov', email: 'vulpe.andreivan@gmail.com' },
                    comment: 'Deep ocean',
                    date: '2023-02-01T12:19:00.247Z'
                  },
                ],
              },
              values: [],
            },
            {
              description: 'Comment box with cancel button',
              props: {
                currentUserData: { id: '2', name: 'Jon Jones', email: 'viorel.dram@gmail.com' },
                allowCancel: true,
              },
              values: [],
            },   
          ],
          propDef: [
            {
              name: 'currentUser',
              description: 'Current user data',
              type: 'Object',
              default: {},
              values: ''
            },
            {
              name: 'list',
              description: 'The list of comments',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'allowReply',
              description: 'Allow to reply on comment',
              type: 'Boolean',
              default: true,
              values: ''
            },
            {
              name: 'addCommentText',
              description: 'Button text',
              type: 'String',
              default: 'Add comment',
              values: ''
            },
            {
              name: 'placeholder',
              description: 'The placeholder displayed on empty comment box',
              type: 'String',
              default: 'Add your comment',
              values: ''
            },
            {
              name: 'allowCancel',
              description: 'Displays a cancel button',
              type: 'boolean',
              default: 'false',
              values: ''
            },
            
            {
              name: 'locale',
              description: 'Determines the locale used for formatting dates and times',
              type: 'String',
              default: 'en',
              values: ''
            },
          ],
        },
        {
          name: 'Multiple Select',
          description: 'User can select multiple options',
          component: multipleSelect,
          tag: 'multiple-select',
          tags: ['multiple-select'],
          instances: [
            {
              description: 'Multiple select - basic',
              props: {
                options: [
                  {
                    title: 'Vue',
                    itemKey: 'vueJs',
                    selected: false
                  },
                  {
                    title: 'Angular', 
                    itemKey: 'angularJs',
                    selected: false
                  },
                  {
                    title: 'React',
                    itemKey: 'reactJs', 
                    selected: true
                  },
                ],
              },
            },
            {
              description: 'Multiple select with buttons',
              props: {
                options: [
                  {
                    title: 'Vue',
                    itemKey: 'vueJs',
                    selected: false
                  },
                  {
                    title: 'Angular',
                    itemKey: 'angularJs', 
                    selected: false
                  },
                  {
                    title: 'React',
                    itemKey: 'reactJs',
                    selected: true
                  },
                ],
                allowSelectAll: true,
              },
            },
            {
              description: 'Multiple select with limits',
              props: {
                options: [
                  {
                    title: 'Vue',
                    itemKey: 'vueJs',
                    selected: false
                  },
                  {
                    title: 'Angular',
                    itemKey: 'angularJs',
                    selected: false
                  },
                  {
                    title: 'React', 
                    itemKey: 'reactJs',
                    selected: true
                  },
                ],
                minSelection: 1,
                maxSelection: 2,
              },
            },
          ],
        },
        {
          name: 'Todo',
          description: 'A simple component for creating todo lists.',
          component: todo,
          tag: 'todo',
          tags: ['todo'],
          instances: [
            {
              description: 'Todo List with default props',
              props: {
                // list: availableFilters
              },
              value: []
            },
            {
              description: 'Todo List with hide completed prop',
              props: {
                hideCompleted: true,
                description: 'test description'
              },
              value: []
            },
            {
              description: 'Todo List with show checkbox and show delete props',
              props: {
                showCheckbox: false,
                showDelete: true,
              },
              value: []
            },
            {
              description: 'Todo List with readonly prop',
              props: {
                readonly: true,
              },
              value: [ { 'title': 'todo 1' }, { 'title': 'todo 2' } ]
            },
            {
              description: 'Todo List with no draggable items',
              props: {
                disableSort: true,
              },
              value: []
            },
          ],

          propDef: [
            {
              name: 'caption',
              description: 'The field caption text',
              type: 'String',
              values: ''
            },
            {
              name: 'description',
              description: 'The field description text',
              type: 'String',
              values: '',
            },
            {
              name: 'value',
              description: 'The list of items',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'hideCompleted',
              description: 'Hide items marked as completed',
              type: 'Boolean',
              default: false,
              values: ''
            },
            {
              name: 'placeholder',
              description: 'The placeholder displayed when adding items',
              type: 'String',
              default: 'Add item...',
              values: ''
            },
            {
              name: 'showCheckbox',
              description: 'Indicate whether the checkbox should be displayed',
              type: 'Boolean',
              default: 'true',
              values: ''
            },
            {
              name: 'showDelete',
              description: 'Indicate whether the delete icon should be displayed',
              type: 'Boolean',
              default: 'false',
              values: ''
            },
            {
              name: 'readonly',
              description: 'Indicate whether the component should be read-only',
              type: 'Boolean',
              default: 'false',
              values: ''
            },
            {
              name: 'disableSort',
              description: 'Indicate whether the items should be draggable',
              type: 'Boolean',
              default: 'false',
              values: ''
            },
          ],
        },
        {
          name: 'Signature',
          description: 'A simple component for collecting signatures.',
          component: signature,
          tag: 'signature',
          tags: ['signature', 'advanced'],
          instances: [
            {
              description: 'Signature component with default props',
              props: {},
              value: []
            },
            {
              description: 'Signature component with styles',
              props: {
                containerClass: 'row gap-3',
                signatureClass: 'col-6'
              },
              value: []
            },
            {
              description: 'Signature component with custom label',
              props: {
                caption: 'Semnatura'
              },
              value: []
            },
          ],

          propDef: [
            {
              name: 'value',
              description: 'The list of signature, title pairs',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'width',
              description: 'The width of the component and signature pad',
              type: 'String',
              default: '100%',
              values: 'Any valid css width'
            },
            {
              name: 'height',
              description: 'The height of the signature pad',
              type: 'String',
              default: '100%',
              values: 'Any valid css height'
            },
            {
              name: 'containerClass',
              description: 'Extra class to append to the signature container',
              type: 'String',
              default: '',
              values: ''
            },
            {
              name: 'signatureClass',
              description: 'Extra class to append to the signatures',
              type: 'String',
              default: '',
              values: ''
            },
            {
              name: 'caption',
              description: 'The text displayed on the signature button',
              type: 'String',
              default: '',
              values: ''
            },
          ],
        },
        {
          name: 'Document',
          description: 'A simple component for creating printable documents.',
          component: document,
          tag: 'document',
          tags: ['document', 'advanced'],
          instances: [
            {
              description: 'Document component default props',
              props: {},
              value: [
                {
                  type: 'h1',
                  value: 'Document title',
                },
                {
                  type: 'p',
                  value: 'First paragraph'
                },
                {
                  type: 'p',
                  value: 'Second paragraph'
                },
              ]
            },
            {
              description: 'Document component with styling',
              props: {},
              value: [
                {
                  type: 'p',
                  value: '28 septembrie',
                  style: {
                    fontWeight: 'bold',
                  }
                },
                {
                  type: 'h1',
                  value: 'Document title',
                  style: {
                    color: '#5A9BEA',
                  }
                },
                {
                  type: 'p',
                  value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend mi et purus mattis condimentum. Donec leo risus, consectetur bibendum diam sed, rhoncus pulvinar sem.'
                },
                {
                  type: 'slot'
                },
                {
                  type: 'p',
                  value: 'Nunc posuere nec lectus non vehicula. Quisque ac varius nulla, nec euismod nibh.'
                },
                {
                  type: 'signature',
                  value: [],
                  fixed: true
                },
              ]
            }
          ],
          propDef: [
            {
              name: 'value',
              description: 'The list of elements rendered in the document.',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'printPage',
              description: 'Flag for printing the whole page.',
              type: 'Boolean',
              default: false,
              values: ''
            }
          ],
        },
        {
          name: 'Floor planner',
          description: 'A component for creating floor plans with movable pins.',
          component: floorPlanner,
          tag: 'floor-planner',
          tags: ['floor-planner', 'planner', 'floor'],
          instances: [
            {
              description: 'Floor planner with simple node list',
              props: {
                backgroundImage: 'https://global.discourse-cdn.com/sitepoint/original/3X/d/6/d64946e2dd9b6218712493dc64d6b63ca673a7fd.jpeg',
                nodeList: [
                  { 
                    id: 'n1', 
                    x:  Math.random() * 1600,
                    y: Math.random() * 800,
                  },
                  { 
                    id: 'n2', 
                    x:  Math.random() * 1600,
                    y: Math.random() * 800,
                  },
                  { 
                    id: 'n3', 
                    x:  Math.random() * 1600,
                    y: Math.random() * 800,
                  }
                ]
              },
              value: [
              ]
            },
            {
              description: 'Floor planner with styled node list',
              props: {
                backgroundImage: 'https://cubicasa-wordpress-uploads.s3.amazonaws.com/uploads/2019/07/simple-stylish.png',
                nodeList: [
                  { 
                    id: '1', 
                    x:  Math.random() * 1600,
                    y: Math.random() * 800,
                    label: 'n1', 
                    color: 'blue'
                  },
                  { 
                    id: '2', 
                    x:  Math.random() * 1600,
                    y: Math.random() * 800,
                    label: 'n2', 
                    color: 'purple'
                  },
                  { 
                    id: '3', 
                    x:  Math.random() * 1600,
                    y: Math.random() * 800,
                    label: 'n3', 
                    color: 'green'
                  }
                ],
                addNodeOnDblClick: false
              },
              value: [
              ]
            },
          ],
          propDef: [
            {
              name: 'backgroundImage',
              description: 'The floor plan url.',
              type: 'String',
              default: null,
              values: ''
            },
            {
              name: 'nodeList',
              description: 'The list of pins on the map.',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'addNodeOnDblClick',
              description: 'Indicate whether a new node should be added to the plan upon a double-click action',
              type: 'Boolean',
              default: true,
              values: ''
            },
          ],
        },
        {
          name: 'Report Definition',
          description: 'A component for defining reports.',
          component: reportDefinition,
          tag: 'report-definition',
          tags: ['report-definition', 'report', 'definition'],
          instances: [
            {
              description: 'Report definition',
              props: {
                axisOptions: [
                  {
                    id: '467',
                    name: 'Denumire echipament',
                    path: 'denumire',
                    type: 'string',
                  },
                  {
                    id: '856',
                    name: 'Localitate',
                    path: 'adresa.data.localitate',
                    type: 'string',
                  },
                  {
                    id: '164',
                    name: 'Judet',
                    path: 'adresa.data.judet',
                    type: 'string',
                  },
                ],
                reportTypes: [
                  {
                    id: 't1',
                    name: 'BarChart',
                  },
                  {
                    id: 't2',
                    name: 'PieChart',
                  }
                ],
                filters: [
                  {
                    id: 'f1',
                    name: 'County filter',
                  },
                  {
                    id: 'f2',
                    name: 'Name filter',
                  }
                ],
                showDateRange: true,
              },
              value: [
              ]
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'The caption text',
              type: 'String',
              values: '',
            },
            {
              name: 'description',
              description: 'The description text',
              type: 'String',
              values: '',
            },
            {
              name: 'axisOptions',
              description: 'The list for x and y axis options.',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'reportTypes',
              description: 'The list for report types.',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'labels',
              description: 'All possible texts in the form.',
              type: 'Object',
              default: {
                'name': 'Report Name',
                'namePlaceholder': 'Enter report name',
                'description': 'Report Description',
                'descriptionPlaceholder': 'Enter report description',
                'type': 'Report Type',
                'axisX': 'Axis - X',
                'axisY': 'Axis - Y',
                'aggregate': 'Aggregate Data',
                'select': 'Select',
                'saveButton': 'Save'
              },
              values: ''
            },
            {
              name: 'reportInitialData',
              description: 'Initial data object for the report, prefilling form fields if needed.',
              type: 'Object',
              default: {},
              values: ''
            },
            {
              name: 'aggregateOptions',
              description: 'List of aggregation functions available for the report, such as sum, average, count, etc.',
              type: 'Array',
              default: [],
              values: ''
            },
          ],
        },
        {
          name: 'Report Rendering',
          description: 'A component for rendering reports.',
          component: reportRendering,
          tag: 'report-rendering',
          tags: ['report-rendering', 'report', 'rendering'],
          instances: [
            {
              description: 'Report rendering line chart',
              props: {
                caption: 'Caption example',
                description: 'Description example',
                type: 'line',
                data: [
                  { 467: 2010, 856: 10 },
                  { 467: 2011, 856: 20 },
                  { 467: 2012, 856: 15 },
                  { 467: 2013, 856: 25 },
                  { 467: 2014, 856: 22 },
                  { 467: 2015, 856: 30 },
                  { 467: 2016, 856: 28 },
                ],
                x: {
                  'axis': {
                    id: '467',
                    name: 'Year',
                    path: 'year',
                    type: 'number',
                  }
                },
                y: {
                  'axis': {
                    id: '856',
                    name: 'Count',
                    path: 'data.count',
                    type: 'number',
                  }
                }
              },
              value: [
              ]
            },
            {
              description: 'Report rendering bar chart with options',
              props: {
                type: 'bar',
                data: [
                  { 467: 2010, 856: 10, 857: 10 },
                  { 467: 2011, 856: 20 },
                  { 467: 2012, 856: 15, 857: 10 },
                  { 467: 2013, 856: 25 },
                  { 467: 2014, 856: 22, 857: 10 },
                  { 467: 2015, 856: 30 },
                  { 467: 2016, 856: 28 },
                ],
                x: {
                  'axis': {
                    id: '467',
                    name: 'Year',
                    path: 'year',
                    type: 'number',
                  }
                },
                y: [
                  {
                    'axis': {
                      id: '856',
                      name: 'Count',
                      path: 'data.count',
                      type: 'number',
                    }
                  },
                  {
                    'axis': {
                      id: '857',
                      name: 'Max',
                      path: 'data.max',
                      type: 'number',
                    }
                  }
                ],
                options: {
                  scales: {
                    yAxes: [{
                      ticks: {
                        beginAtZero: true
                      },
                      
                    }]
                  },
                  title: {
                    display: true,
                    text: 'Bar chart title example'
                  },
                  onClick: function(c, i) {
                    const e = i[0];
                    let x_value 
                    let y_value 
                    if (e) {
                      x_value = this.data.labels[e._index];
                      y_value = this.data.datasets[0].data[e._index];
                    }
                    console.log(`you clicked the graph, x value is = ${x_value}, and y value is = ${y_value}`); 
                  },
                }
              },
              value: [
              ]
            },
          ],
          propDef: [
            {
              name: 'caption',
              description: 'A label or title displayed above the chart. Use this to give the chart a heading.',
              type: 'String',
              values: '',
            },
            {
              name: 'description',
              description: 'Additional text that can be used to provide context or information about the chart. Displayed below the chart.',
              type: 'String',
              values: '',
            },
            {
              name: 'type',
              description: 'Defines the type of chart to render.',             type: 'String',
              default: '',
              values: 'bar, line'
            },
            {
              name: 'data',
              description: 'The data that will be used to render the chart. It should be an array of objects where each object corresponds to a data point or dataset.',
              type: 'Array',
              default: [],
              values: ''
            },
            {
              name: 'x',
              description: 'Configuration for the x-axis of the chart.',              type: 'Object',
              default: {},
              values: ''
            },
            {
              name: 'y',
              description: 'Configuration for the y-axis of the chart.',              type: 'Object',
              type: 'Object | Array',
              default: [],
              values: ''
            },
            {
              name: 'options',
              description: 'The configuration options object for the chart rendering. It allows customization of scales, labels, legend, tooltips, etc.',
              type: 'Object',
              default: {},
              values: ''
            },
            {
              name: 'plugins',
              description: 'Plugins to customize or change the default behavior of a chart.',
              type: 'Object',
              default: {},
              values: ''
            },
            {
              name: 'shouldExportCSV',
              description: 'Controls whether to trigger the CSV export of report data. When true, initiates the download of the current report data in CSV format.',
              type: 'Boolean',
              default: false,
              values: ''
            },
          ],
        },
      ],
    };
  },

  computed: {
    filteredInputList: function () {
      const vm = this;
      let ret = [];
      let filter = vm.selectedNavItem.filter;
      let query = vm.searchQuery.trim().toLowerCase();

      if (filter == '*') {
        ret = vm.inputList.sort((a, b) => {
          return a.name.localeCompare(b.name);
        });
      } else {
        vm.inputList.forEach((i, index) => {
          if (i.tags === undefined) {
            return;
          }

          let tagIntersect = filter.filter((value) => i.tags.includes(value));

          if (tagIntersect.length) {
            ret.push(i);
          }
        });
      }

      if (query !== '') {
        ret.forEach((i) => {
          i.searchScore = vm.getQueryScore(i, query);
        });

        ret = ret.filter((value) => value.searchScore > 0);
        ret.sort((a, b) => {
          if (a.searchScore < b.searchScore) {
            return 1;
          }

          if (a.searchScore > b.searchScore) {
            return -1;
          }

          return 0;
        });
      }

      return ret;
    },
  },

  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    const queryFromUrl = urlParams.get('q');
    if (queryFromUrl) {
      this.inputQuery = queryFromUrl;
      this.searchQuery = queryFromUrl;
    }

    window.addEventListener('popstate', this.handlePopState);
  },

  beforeDestroy() {
    window.removeEventListener('popstate', this.handlePopState);
  },

  watch: {
    inputQuery(newQuery) {
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer);
      }
      
      this.debounceTimer = setTimeout(() => {
        this.searchQuery = newQuery;
        this.updateUrl(newQuery);
      }, 300);
    },
    
    searchQuery(newQuery) {
      console.log('searchQuery changed:', newQuery);
    }
  },

  methods: {
    generateImplementationCode(tag, props) {
      let s = `<${tag}`;
      Object.keys(props).forEach((k) => {
        if (k == 'value') {
          return;
        }

        if (typeof props[k] === 'boolean') {
          s += `\n  :${k}="${props[k]}"`;
          return;
        }

        if (typeof props[k] === 'object') {
          s += `\n  :${k}="${JSON.stringify(props[k])}"`;
          return;
        }

        s += `\n  ${k}="${props[k]}"`;
      });
      s += `></${tag}>`;

      return s;
    },

    getQueryScore(input, query) {
      let score = 0;

      if (input.name.toLowerCase().indexOf(query) != -1) {
        score += 5;

        let pos = 10 - input.name.toLowerCase().indexOf(query);
        if (pos > 0) {
          score += pos;
        }
      }

      if (input.description.toLowerCase().indexOf(query) != -1) {
        score += 3;
      }

      if (input.tags && input.tags.length) {
        input.tags.forEach((t) => {
          if (t.indexOf(query) != -1) {
            score += 1;
          }
        });
      }

      if (input.propDef) {
        input.propDef.forEach((p) => {
          if (p.name && p.name.toLowerCase().indexOf(query) != -1) {
            score += 2;
          }

          if (
            p.description &&
            p.description.toLowerCase().indexOf(query) != -1
          ) {
            score += 1;
          }
        });
      }

      return score;
    },

    updateUrl(query) {
      const url = new URL(window.location);
      
      if (query && query.trim() !== '') {
        url.searchParams.set('q', query);
      } else {
        url.searchParams.delete('q');
      }
      
      window.history.pushState({}, '', url);
    },

    handlePopState() {
      const urlParams = new URLSearchParams(window.location.search);
      const queryFromUrl = urlParams.get('q') || '';
      this.inputQuery = queryFromUrl;
      this.searchQuery = queryFromUrl;
    },
  },
};
</script>

<style lang="scss" scoped>
input[name="query"] {
  font-size: 1.2em;
}

p.value-render {
  display: inline-block;
  max-height: 600px;
  width: 100%;
  overflow: auto;
  border: solid 1px #00000011;
  padding: 5px;
  border-radius: 0.25em;
}
</style>