import docs from "./pn-address-autofill-docs.json";

export default {
  title: 'Components/Input/Address Autofill',
  parameters: {
    notes: docs,
    layout: 'centered',
  },
};

const Template = ({ ...args }) => {
  return `
    <pn-address-autofill
      environment="${args.environment}"
      language="${args.language}"
      market="${args.market}"
      cache="${args.cache}"
      country-code="${args.countryCode}"
      postal-code-props='${args.postalCodeProps}'
      city-props='${args.cityProps}'
      street-address-props='${args.streetAddressProps}'
      street-number-props='${args.streetNumberProps}'
      endpoint='${args.endpoint}'
      address-not-found-error="${args.addressNotFoundError}"
      >
    </pn-address-autofill>`;
};

export const Primary = Template.bind({});
Primary.args = {
  environment: 'localhost',
  market: 'se',
  language: '',
  endpoint: 'https://localhost:51547/',
  cache: true,
  countryCode: 'se',
  addressNotFoundError: "Address not found in storybook",
  postalCodeProps:
    '{"postalCodeCityLabel":"Postal Code and city labe","postalCodeInputName":"__postalcode","postalCodeInputPlaceholder":"Postal Code","postalCodeInputRequired":true,"postalCodeInputHelpertext":"Postal Code Helpertext", "postalCodeInputError":"Too low"}',
  cityProps: '{"cityInputName":"__city","cityInputPlaceholder":"City","cityInputHelpertext":"City Helpertext"}',
  streetAddressProps:
    '{"streetAddressNumberLabel":"Street and number Label","streetAddressInputName":"__streetaddress","streetAddressInputPlaceholder":"Street Address","streetAddressInputRequired":true,"streetAddressInputHelpertext":"Street Address Helpertext","streetAddressInputError":"Type first letter then choose from list"}',
  streetNumberProps:
    '{"streetNumberInputName":"__streetnumber","streetNumberInputPlaceholder":"Street Number","streetNumberInputRequired":true,"streetNumberInputHelpertext":"Street Number Helpertext","streetNumberInputError":"Type first letter then choose from list"}',
};
