import docs from "./pn-dropdown-choice-adds-row-docs.json";

export default {
  title: 'Components/Input/Dropdownlist choice adds new row (DK forms)',
  parameters: {
    notes: docs,
  },
};

const Template = ({ ...args }) => {
  return `
    <pn-dropdown-choice-adds-row 
      dropdown-data='${args.dropdownData}'
      add-row-dropdown-label="${args.addRowDropdownLabel}"
      add-row-dropdown-placeholder="${args.addRowDropdownPlaceholder}"
      row-name-label="${args.rowNameLabel}"
      row-has-dropdown="${args.rowHasDropdown}"
      row-dropdown-label="${args.rowDropdownLabel}"
      row-dropdown-placeholder="${args.rowDropdownPlaceholder}"
      row-input-label="${args.rowInputLabel}"
      row-delete-button-text="${args.rowDeleteButtonText}"
      total-input-limit="${args.totalInputLimit}"
      input-limit-warning="${args.inputLimitWarning}"
      input-empty-warning="${args.inputEmptyWarning}"
      input-low-error="${args.inputLowError}"
      minimum-input-limit="${args.minimumInputLimit}"
      dropdown-empty-warning="${args.dropdownEmptyWarning}"
      >
    </pn-dropdown-choice-adds-row>

    <pn-dropdown-choice-adds-row 
      dropdown-data='${args.secondDropdownData}'
      add-row-dropdown-label="${args.addRowDropdownLabel}"
      add-row-dropdown-placeholder="${args.addRowDropdownPlaceholder}"
      row-name-label="${args.rowNameLabel}"
      row-has-dropdown="${args.rowHasDropdown}"
      row-dropdown-label=""
      row-dropdown-placeholder="${args.rowDropdownPlaceholder}"
      row-input-label="${args.rowInputLabel}"
      row-delete-button-text="${args.rowDeleteButtonText}"
      total-input-limit="10"
      input-limit-warning=""
      input-empty-warning=""
      dropdown-empty-warning
      >
    </pn-dropdown-choice-adds-row>
    `;
};

export const Primary = Template.bind({});
Primary.args = {
  dropdownData:
    '[{"label":"First","value":"first","values":[{"label":"First-child 1","value":"First-child 1"},{"label":"First-child 2","value":"First-child 2"}]},{"label":"Second","value":"second","values":[{"label":"Second-child 1","value":"Second-child 1"},{"label":"Second-child 2","value":"Second-child 2"}]},{"label":"Third","value":"Third","values":[]}]',
  addRowDropdownName: '__addrowdropdown',
  addRowDropdownPlaceholder: '-- Vaelg her --',
  addRowDropdownLabel: 'Produkter til afhentning:*',
  rowNameLabel: 'Produkt',
  rowHasDropdown: true,
  rowDropdownLabel: 'Transportenhed',
  rowDropdownPlaceholder: '-- Vaelg her --',
  rowInputLabel: 'Antal',
  rowDeleteButtonText: 'Slet',
  totalInputLimit: 30,
  inputLimitWarning: 'max',
  inputEmptyWarning: 'empty',
  inputLowError: 'too low',
  minimumInputLimit: 1,
  dropdownEmptyWarning: 'This field cannot be empty',
  secondDropdownData: '[{"values":[],"checked":false,"label":"Bakker (l\u00F8se)","value":""},{"values":[],"checked":false,"label":"Bakkevogne med bakker","value":""},{"values":null,"checked":false,"label":"Bakkevogne uden bakker","value":""},{"values":null,"checked":false,"label":"Postcontainere","value":""},{"values":[],"checked":false,"label":"Intet til levering","value":"Intet til levering"}]',
};
