import docs from "./pn-marketweb-search-docs.json";

export default {
  title: 'Components/Input/Market web search field',
  parameters: {
    notes: docs,
    layout: 'centered',
  },
};

const Template = ({ ...args }) => {
  return `
    <pn-marketweb-search
      label="${args.label}"
      name="${args.name}"
      inputid="${args.inputid}"
      autocomplete="${args.autocomplete}"
      placeholder="${args.placeholder}"
      button="${args.button}"
      disabled=${args.disabled}
      loading=${args.loading}
      light="${args.light}"
      tooltip="${args.label}"
      list="listexample"
      ></pn-marketweb-search>
      <datalist id="listexample">
      <option>Autocomplete example</option>
      <option>More autocomplete examples</option>
      </datalist>
      <script>
      // window.setTimeout(function() {
      //   const newOpt = document.createElement("option");
      //   newOpt.innerHTML = "new item";
      //   document.getElementById("listexample").appendChild(newOpt);
      // }, 500);
      </script>
  `;
};
export const Primary = Template.bind({});
Primary.args = {
  label: 'search',
  name: 'search',
  inputid: 'search-test',
  autocomplete: '',
  placeholder: 'placeholder',
  button: 'icon',
  disabled: false,
  loading: false,
  light: false,
  tooltip: 'search',
};
Primary.argTypes = {
  button: {
    control: 'select',
    options: ['', 'icon', 'icon-inline'],
  },
};
