import 'core-js/modules/es.object.assign.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useEffect } from 'react';
import { styled } from '@mui/material';
import { useSnapScroll } from './useSnapScroll.js';
import { IconButton } from '../../atom/Button/IconButton.js';
import { IconFont } from '../../atom/IconFont/IconFont.js';

const SliderItem = styled('div')({
  scrollSnapAlign: 'center'
});
const Container = styled('div')({
  width: '100%',
  position: 'relative',
  textAlign: 'center',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between'
});
const SliderList = styled('div')({
  display: 'flex',
  scrollSnapType: 'x mandatory',
  alignItems: 'flex-start',
  flexFlow: 'row nowrap',
  overflow: 'auto',
  overflowY: 'hidden'
});
const SnapSlider = ({
  itemDistance: _itemDistance = window.innerWidth,
  initialScrollIndex: _initialScrollIndex = 0,
  listClassName,
  itemClassName,
  children
}) => {
  const {
    ref,
    moveLeft,
    moveRight,
    onScrollHandler,
    showScrollButtons,
    isLeftDisabled,
    isRightDisabled
  } = useSnapScroll(_itemDistance, children.length);
  useEffect(() => {
    if ((ref === null || ref === void 0 ? void 0 : ref.current) && _initialScrollIndex > 0) {
      const {
        scrollWidth,
        clientWidth
      } = ref.current;
      const scrollWidthPerItem = (scrollWidth - clientWidth) / children.length;
      ref.current.scrollTo({
        left: scrollWidthPerItem * _initialScrollIndex
      });
    }
  }, [children.length, _initialScrollIndex, ref]);
  return jsxs(Container, {
    children: [showScrollButtons && jsx(IconButton, Object.assign({
      disabled: isLeftDisabled,
      onClick: moveLeft,
      variant: "text"
    }, {
      children: jsx(IconFont, {
        name: "chevron_left"
      })
    })), jsx(SliderList, Object.assign({
      ref: ref,
      className: listClassName,
      onScroll: onScrollHandler,
      "data-hide-scrollbar": true
    }, {
      children: children.map((item, index) => jsx(SliderItem, Object.assign({
        className: itemClassName
      }, {
        children: item
      }), index))
    })), showScrollButtons && jsx(IconButton, Object.assign({
      disabled: isRightDisabled,
      onClick: moveRight,
      variant: "text"
    }, {
      children: jsx(IconFont, {
        name: "chevron_right"
      })
    }))]
  });
};

export { SnapSlider, SnapSlider as default };
