import { useId } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import cx from "../../../utils/css/cx.js";
import useActiveScrollSection from "../../../hooks/useActiveScrollSection/index.js";
import Slides from './Slides';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const ScrollyScaffold = function ScrollyScaffold(props) {
  const {
    steps = [],
    slideComponent,
    slidesComponent: SlidesComponent = Slides,
    cardProps
  } = props;
  const id = useId();
  const {
    activeIndex
  } = useActiveScrollSection({
    selector: `[data-scrollid="${id}"]`
  });
  const slides = steps.map((step, stepIndex) => {
    const stepSlides = get(step, 'slides', []);
    return stepSlides.map((slide, slideIndex) => ({
      key: `${stepIndex}-${slideIndex}`,
      index: stepIndex,
      ...slide
    }));
  }).flat();
  const activeSlot = get(steps, activeIndex, {});
  return <div>
      <div className={cls('container')}>
        <div className={cls('content')}>
          <div className={cls('canvas')}>
            {activeSlot.children}
          </div>
        </div>
      </div>

      <SlidesComponent slides={slides} slideComponent={slideComponent} data-scrollid={id} cardProps={cardProps} />
    </div>;
};
ScrollyScaffold.defaultProps = {
  steps: [],
  slideComponent: undefined,
  slidesComponent: undefined,
  cardProps: undefined
};
ScrollyScaffold.propTypes = {
  /**
   * The step configurations for the scrolly. Each step specifies its slides
   * as well as its children, which are rendered in the background.
   */
  steps: PropTypes.arrayOf(PropTypes.shape({
    children: PropTypes.node,
    slides: PropTypes.arrayOf(PropTypes.shape({
      text: PropTypes.string,
      justify: PropTypes.oneOf(['left', 'right', 'center'])
    }))
  })),
  /**
   * A custom component to render a single slide. This lets you cannge the
   * default look of the slide itself.
   */
  slideComponent: PropTypes.elementType,
  /**
   * A custom component to render all of the slides in a custom container. This
   * puts the onus on you to render all the slides yourself.
   */
  slidesComponent: PropTypes.elementType,
  /**
   * Props to pass to the `Card` component if you're using the default `slides`
   * and `slides` components. See stories for the `Card` component for details.
   */
  cardProps: PropTypes.shape({})
};
export default ScrollyScaffold;