
import React, { useState } from 'react';
import classNames from 'classnames/bind';
import Flicking from '@egjs/react-flicking';
import styles from './BannerScrollList.scss';
import BannerCard from '@src/components/common/BannerCard';
import useProgress from '@src/hooks/useProgress';
import { INFT } from 'metarare';

const cx = classNames.bind(styles);

interface IOwnProps {
  list: INFT[];
};

const BannerScrollList: React.FC<IOwnProps> = ({
  list
}) => {
  const PROGRESS_BAR_COUNT = list.length >= 5 ? 5 : list.length;

  const [progressbarIndex, setProgressbarIndex] = useState<number>(0);
  const { progressbarRefs } = useProgress({
    setProgressbarIndex,
    count: PROGRESS_BAR_COUNT
  });

  const currentCollection = list[progressbarIndex];
  const subList = list.slice(PROGRESS_BAR_COUNT);

  return (
    <div className={cx('banner_scroll')}>
      <div className={cx('banner')}>
        <div className={cx('main_banner')}>
          <div className={cx('banner_area')}>
            <BannerCard
              src={currentCollection.collection_thumbnail_image}
              collectionName={currentCollection.collection_name}
              isMain
            />
          </div>
          {PROGRESS_BAR_COUNT > 1 && (
            <div className={cx('pagination')}>
              {[...new Array(PROGRESS_BAR_COUNT).keys()].map(item => (
                <div className={cx('bar')} key={item}>
                  <div className={cx('current')} ref={progressbarRefs[item]} />
                </div>
              ))}
            </div>
          )}
        </div>
        <div className={cx('sub_banner')}>
          <Flicking align="prev">
            {subList.map((item, index) => (
              <div
                className={cx('banner_panel')}
                key={`${item.sale_id}_${index}`}
              >
                <BannerCard
                  src={item.collection_thumbnail_image}
                  collectionName={item.collection_name}
                />
              </div>
            ))}
          </Flicking>
        </div>
      </div>
    </div>
  );
};

export default BannerScrollList;
