import docs from "./pn-multi-row-connected-dropdown-docs.json";

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

const Template = ({ ...args }) => {
  return `
      <pn-multi-row-connected-dropdown
        dropdown-data='${args.dropdownData}'
        label='${args.buttonsLabel}'
        dropdown-placeholder='${args.dropdownPlaceholder}'
        first-dropdown-label='${args.firstDropdownLabel}'
        second-dropdown-label='${args.secondDropdownLabel}'
        input-field-label='${args.inputFieldLabel}'
        input-field-placeholder='${args.inputFieldPlaceholder}'
        allow-multiple-rows='${args.allowMultipleRows}'
        allow-multiple-dates='${args.allowMultipleDates}'
        disabled-dates='${args.disabledDates}'
        date-button-text='${args.dateButtonText}'
        date-placeholder='${args.datePlaceHolder}'
        date-days-from-today='${args.dateDaysFromToday}'
        language-code='${args.languageCode}'
        add-row-text='${args.addRowText}'
        generate-dates-button-text='${args.generateDatesButtonText}'
        multi-date-helper-text='${args.multiDateHelperText}'
        save-date-button-text='${args.saveDateButtonText}'
        no-dates-text='${args.noDatesText}'
        start-date-label='${args.startDateLabel}'
        end-date-label='${args.endDateLabel}'
        years-to-add-to-end-date='${args.yearsToAddToEndDate}'
        min-warning-amount='10'
        min-amount='5'
        warning-message-min-amount=''
        >
      </pn-multi-row-connected-dropdown>`;
};

export const Primary = Template.bind({});
Primary.args = {
  dropdownData:
    '[{"label":"First","value":"First","values":[{"label":"First-1","value":"First-1","values":[{"label":"First-1-1","value":"First-1-1"}]},{"label":"First-2","value":"First-2","values":[{"label":"First-2-1","value":"First-2-1"}]}]},{"label":"Second","value":"Second","values":[{"label":"Second-1","value":"Second-1","values":[{"label":"Second-1-1","value":"Second-1-1"}]},{"label":"Second-2","value":"Second-2","values":[{"label":"Second-2-1","value":"Second-2-1"}]}]}]',
  buttonsLabel: 'ButtonOptions',
  dropdownPlaceholder: 'Chose',
  firstDropdownLabel: 'dropDown1',
  secondDropdownLabel: 'dropDown2',
  inputFieldLabel: 'Amount',
  inputFieldPlaceholder: '0',
  allowMultipleRows: false,
  allowMultipleDates: false,
  disabledDates: '2025-03-11,2025-03-12,2025-03-13',
  dateButtonText: 'Delivery dates',
  datePlaceHolder: 'YYYY-MM-DD',
  dateDaysFromToday: '1',
  languageCode: 'en',
  addRowText: 'Add field',
  generateDatesButtonText: 'Generate dates',
  saveDateButtonText: 'Save dates',
  multiDateHelperText: 'Some helpful text',
  noDatesText: 'No dates',
  startDateLabel: 'Start date',
  endDateLabel: 'End date',
  yearsToAddToEndDate: 2,
};
