import docs from "./pn-dropdown-with-multi-input-rows-docs.json";

export default {
  title: 'Components/Input/Dropdown with Multi Input Rows (DK forms)',
  parameters: {
    notes: docs,
  },
};

const Template = ({ ...args }) => {
  return `
  <pn-dropdown-with-multi-input-rows
  dropdown-data='${args.dropdownData}'
  language-code='${args.languageCode}'
  first-dropdown-label='${args.firstDropdownLabel}'
  first-dropdown-helper-text='${args.firstDropdownHelperText}'
  second-dropdown-label='${args.secondDropdownLabel}'
  second-dropdown-helper-text='${args.secondDropdownHelperText}'
  second-dropdown-max='${args.secondDropdownMax}'
  delete-multiple-rows-warning-text='${args.deleteMultipleRowsWarningText}'
  confirm-delete-button-text='${args.confirmDeleteButtonText}'
  abort-delete-button-text='${args.abortDeleteButtonText}'
  first-input-label='${args.firstInputLabel}'
  first-input-placeholder='${args.firstInputPlaceholder}'
  first-input-min='${args.firstInputMin}'
  first-input-max='${args.firstInputMax}'
  first-input-warning='${args.firstInputWarning}'
  first-input-warning-text='${args.firstInputWarningText}'
  first-input-low-error-text='${args.firstInputLowErrorText}'
  first-input-high-error-text='${args.firstInputHighErrorText}'
  second-input-label='${args.secondInputLabel}'
  second-input-placeholder='${args.secondInputPlaceholder}'
  second-input-min='${args.secondInputMin}'
  second-input-max='${args.secondInputMax}'
  second-input-warning='${args.secondInputWarning}'
  second-input-warning-text='${args.secondInputWarningText}'
  second-input-low-error-text='${args.secondInputLowErrorText}'
  second-input-high-error-text='${args.secondInputHighErrorText}'
  date-label='${args.dateLabel}'
  date-placeholder='${args.datePlaceholder}'
  date-days-from-today='${args.dateDaysFromToday}'
  years-to-add-to-end-date='${args.yearsToAddToEndDate}'
  sum-field-label='${args.sumFieldLabel}'
  add-row-text='${args.addRowText}'
  element-helper-text='${args.elementHelperText}'
  disabled-dates='${args.disabledDates}'
  >
  </pn-dropdown-with-multi-input-rows>
        `;
};

export const Primary = Template.bind({});
Primary.args = {
  dropdownData: '[{"label": "Option1", "value": 4, "checked": false}, {"label": "Option2", "value": 8, "checked": false}]',
  languageCode: 'en',
  firstDropdownLabel: 'dropdown1',
  firstDropdownHelperText: 'dropdown1 help',
  secondDropdownLabel: 'dropdown2',
  secondDropdownHelperText: 'dropdown2 help',
  secondDropdownMax: 53,
  deleteMultipleRowsWarningText: 'Når du ændrer Antal Udgivelser til et lavere antal end først valgt, skal du være opmærksom på at allerede indtastede indleveringer slettes',
  confirmDeleteButtonText: 'Slet',
  abortDeleteButtonText: 'Fortryd',
  firstInputLabel: 'first input',
  firstInputPlaceholder: 'amount',
  firstInputMin: 500,
  firstInputMax: 2000000,
  firstInputWarning: 1500,
  firstInputWarningText: 'Antal er pr indlevering skal være på minimum 1500 stk. eller der skal betales op til minimum',
  firstInputLowErrorText: 'Du kan ikke indlevere under 500 stk.',
  firstInputHighErrorText: 'Du kan ikke indlevere over 2000000 stk.',
  secondInputLabel: 'second input',
  secondInputPlaceholder: 'amount',
  secondInputMin: 0,
  secondInputMax: 2000,
  secondInputWarning: 60,
  secondInputWarningText: 'Bemærk der betales for mindst 60 gram, uanset vægt',
  secondInputLowErrorText: '',
  secondInputHighErrorText: 'Forkert vægt max. 2000',
  disabledDates: '',
  dateLabel: 'date',
  datePlaceholder: 'YYYY-MM-DD',
  dateDaysFromToday: 1,
  yearsToAddToEndDate: 2,
  sumFieldLabel: 'Sum',
  addRowText: 'Add Row',
  elementHelperText: 'Helpful text',
};
