import clsx from 'clsx';
import React from 'react';
import { Button, ButtonContext } from '../../../Buttons';
import { IconName } from '../../../Icons';
import classes from './ScrollContainer.scss';
import { useScroll } from './useScroll';

export const ScrollContainer: React.FC = ({ children }) => {
  const {
    scrollRef,
    showScroll,
    scrollLeft,
    scrollRight,
    enableScrollLeft,
    enableScrollRight,
  } = useScroll<HTMLDivElement>();

  return (
    <div className={clsx(classes.container, { [classes.scroll]: showScroll })}>
      <Button
        buttonContext={ButtonContext.Icon}
        icon={IconName.ChevronLeft}
        onButtonClicked={scrollLeft}
        className={clsx({ [classes.hide]: !showScroll })}
        disabled={!enableScrollLeft}
      />

      <div className={classes.tablistWrapper} ref={scrollRef}>
        {children}
      </div>

      <Button
        buttonContext={ButtonContext.Icon}
        icon={IconName.ChevronRight}
        onButtonClicked={scrollRight}
        className={clsx({ [classes.hide]: !showScroll })}
        disabled={!enableScrollRight}
      />
    </div>
  );
};
