import { Box } from '@rebass/emotion';
import css from '@emotion/css';

import { FluidContainer } from 'utils/styles/mixins';

import { PRODUCT_LIST } from 'utils/constants/layouts-names'

import { ListConfigSettings } from '../product-list-module.types';
import * as Styles from './product-list-module-default.styles';

const mobileMediumSliderConfig = [
  {
    breakpoint: 900,
    settings: {
      slidesToShow: 1,
      rows: 1,
      slidesToScroll: 1,
      centerMode: true,
      centerPadding: '90px',
      arrows: false
    }
  },
  {
    breakpoint: 540,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      centerMode: true,
      centerPadding: '40px'
    }
  }
];

export const ListConfig: ListConfigSettings = {
  [PRODUCT_LIST.SMALL]: {
    wrapper: Box,
    sliderWrapperStyles: {},
    slickStyles: css`
      ${Styles.InlineSlideStyles}
    `,
    setArrowOffset: true,
    heading: {
      width: 1,
      textAlign: 'center'
    },
    slider: {
      slidesToShow: 3,
      slidesToScroll: 3,
      dots: true,
      responsive: [
        {
          breakpoint: 1200,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        ...mobileMediumSliderConfig
      ]
    }
  },
  [PRODUCT_LIST.MEDIUM]: {
    wrapper: Box,
    sliderWrapperStyles: {},
    slickStyles: css`
      ${Styles.InlineSlideStyles}
    `,
    setArrowOffset: true,
    heading: {
      width: 1
    },
    slider: {
      slidesToShow: 2,
      slidesToScroll: 2,
      dots: true,
      responsive: [
        ...mobileMediumSliderConfig
      ]
    }
  },
  [PRODUCT_LIST.MEDIUM_WITH_SIDE_HEADING]: {
    wrapper: FluidContainer,
    sliderWrapperStyles: Styles.SliderWrapperSideHeading,
    slickStyles: Styles.SlickStylesSideHeading,
    setArrowOffset: true,
    flexWrap: 'nowrap',
    heading: {
      width: 'auto',
      customCSS: Styles.ProductSideHeading
    },
    slider: {
      rows: 2,
      slidesToShow: 2,
      slidesToScroll: 2,
      dots: true,
      responsive: [
        ...mobileMediumSliderConfig
      ]
    }
  },
  [PRODUCT_LIST.BEGONIA_TRIPLE]: {
    
  }
};