import {createMarketingHeader} from "./MarketingHeaderComponent";
import {searchData, infoTeaserData, singleSlideData, teaserData, sliderData} from "./MarketingHeaderData";

export default {
  title: 'Sections/MarketingHeader',
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    type: {
      name: 'Typ',
      control: {type: 'select'},
      options: ['infoteaser', 'hero-fullwidth'],
      defaultValue: 'infoteaser',
    },
    artworkStyle: {
      name: 'Artwork Stil',
      control: {type: 'select'},
      options: ['artwork', 'artwork-image', 'artwork-background-image'],
      defaultValue: 'artwork',
    },
    headline1: {
      name: 'Überschrift Zeile 1',
      control: {type: 'text'},
      defaultValue: 'Willkommen bei Ihrer IHK.',
    },
    headline2: {
      name: 'Überschrift Zeile 2',
      control: {type: 'text'},
      defaultValue: 'Wie können wir Ihnen helfen?',
    },
    placeholder: {
      name: 'Platzhalter',
      control: {type: 'text'},
      defaultValue: 'Tippe "Taxischein" für Autocomplete',
    },
    tiles: {
      name: 'Kacheln',
      control: {type: 'object'},
      defaultValue: searchData,
    }
  }
}

const Template = ({...args}) => {
  return createMarketingHeader({...args});
};

export const MarketingHeader = Template.bind({});
MarketingHeader.args = {};

export const MarketingHeaderSearchBackground = Template.bind({});
MarketingHeaderSearchBackground.args = {backgroundImage: './dummy/placeholder-4-3.svg'};

export const MarketingHeaderPictoBackground = Template.bind({});
MarketingHeaderPictoBackground.args = {
  pictoImage: './dummy/marketing-header-picto.svg',
  pictoImageMobile: './dummy/marketing-header-picto-mobile.svg'
};

export const MarketingHeaderInfoBanner = Template.bind({});
MarketingHeaderInfoBanner.args = {teasers : infoTeaserData};

export const MarketingHeaderSingleSlide = Template.bind({});
MarketingHeaderSingleSlide.args = {slides: singleSlideData};

export const MarketingHeaderStage = Template.bind({});
MarketingHeaderStage.args = {type:'hero-fullwidth'};

export const MarketingHeaderStageSingle = Template.bind({});
MarketingHeaderStageSingle.args = {
  type: 'hero-fullwidth',
  slides: singleSlideData,
  searchAllButton: true
};