import Thind, { DataStore, Render, SortableTable } from 'thind-js';

const thind = new Thind({ attribute: 'data-my-el' });

// Get a single element
const element = thind.element.get('my-element');
// Get a all elements
const elements = thind.element.getAll('my-elements');

const form = thind.element.get('form');

// Disable the default Webflow submission
thind.form.disable(form); 

//Get value of a specific field by field name
const value = thind.form.value(form, 'username'); 

//Get values of all fields
const values = thind.form.values(form);

//Check if current form is valid, where all required fields are complete
const isValid = thind.form.isValid(form);

//Show Webflow native Form error and pass a custom error message
thind.form.error(form, 'An error occurred');

//Hide the native Webflow form error state
thind.form.errorHide(form);

//Show the Webflow form sucess state
thind.form.success(form, 'showMessage');

//Show the sucess state with custom sucess message
thind.form.success(form, 'showMessage', 'Login Sucessfull');

//Redirect user based on redirect settings of Webflow from
thind.form.success(form, 'redirect');

// Change the text of form button to show the status of form, at end pass true or false to disable or enable the submit buton. True will disable the button.
thind.form.changeSubmitButton(form, 'Submitting...', true);

// Reset the Webflow form. Clear the inputs and hide error & Success state.
thind.form.reset(form);

// Get current page name from url
const pageName = thind.page.name();

// Get all page parameters from url
const params = thind.page.parameters();

// Get value of specific page parameter from url
const param = thind.page.parameter('id');

import { DataStore } from 'thind-js';
import { log } from './logs.js';

// Usage example:
const store = new DataStore({ users: [] }, { caching: true });

// Subscribe to changes in users
store.subscribe('users', (newData) => {
  log(JSON.stringify(newData));
});

// Using DataStore's add, update, delete, and get APIs
store.add('users', { name: 'Placeholder' });
store.add('users', { name: 'Dilraj' });
store.add('users', { name: 'Parminder' });
store.add('users', { name: 'Jasbir' });

store.update('users.4', {
  ...store.get('users.4'),
  age: '23',
  test: true,
});

store.update('users.3', {
  ...store.get('users.3'),
  age: '23',
  test: true,
});

store.delete('users.0');

const dataStore = new DataStore({ users: [] }, { caching: true });

const renderOptions = {
  element: document.getElementById('data-container'),
  data: [{ name: 'Alice' }, { name: 'Bob' }], // Provide data attribute with json data or bind the render instance with a key from Datastore
  dataStore: dataStore,
  key: 'user-data'
  config: {
    props: {
      name: {
        action: (data, element) => {
          element.textContent = data;
        }
      }
    }
  }
};

const render = new Render(renderOptions);


render.update([{ title: '123', complete: false }, { title: 'ABCD', complete: true }]);
render.clear();
render.destroy();

const tableConfig = {
  showIndicators: true,
  acsSvg: '<svg>...</svg>',  // Optional SVG code for icon that will be added text to the text of table header on a accessding sort
  descSvg: '<svg>...</svg>',  // Optional SVG code for icon that will be added text to the text of table header on a descending sort
  SvgClass: 'sort-icon' // Optional class to add to the svg icon
};

const sortableTable = new SortableTable('#header-wrapper', '#list-element', 'data-sort', tableConfig);

// Here we are finding headers inside #header-wrapper with attribute data-sort, and then for each found header we find list items that have data-sort="uniqe value"