
import React, { useEffect, useState } from 'react';
import classNames from 'classnames/bind';

import Flicking, { ViewportSlot } from '@egjs/react-flicking';
import { Arrow } from '@egjs/flicking-plugins';
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 SUB_PANEL_COUNT = 11;

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

  const plugins = [new Arrow()];
  const [progressbarIndex, setProgressbarIndex] = useState<number>(0);
  const { progressbarRefs } = useProgress({
    setProgressbarIndex,
    count: PROGRESS_BAR_COUNT
  });
  const [subPanel, setSubPanel] = useState<INFT[][]>([]);

  useEffect(() => {
    const subPanel = list.slice(SUB_PANEL_COUNT);

    if (subPanel?.length) {
      const panel = [];
      for (let i = 0; i < subPanel.length; i += SUB_PANEL_COUNT-1) {
        panel.push(subPanel.slice(i, i + SUB_PANEL_COUNT-1));
      }

      setSubPanel(panel);
    }
  }, [list]);

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

  return (
    <div className={cx('banner_scroll')}>
      <div className={cx('banner')}>
        <Flicking plugins={plugins}>
          <div className={cx('banner_panel')}>
            <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')}>
              {subList.map((item, index) => (
                <BannerCard
                  key={`${item.sale_id}_${index}`}
                  className={cx('pc_sub')}
                  src={item.collection_thumbnail_image}
                  collectionName={item.collection_name}
                />
              ))}
            </div>

          </div>
          {subPanel.map((list, index) => (
            <div className={cx('banner_panel')} key={index}>
              <div className={cx('sub_banner')}>
                {list.map((item, index) => (
                  <BannerCard
                    key={`${item.sale_id}_${index}`}
                    className={cx('pc_sub')}
                    src={item.collection_thumbnail_image}
                    collectionName={item.collection_name}
                  />
                ))}
              </div>
            </div>
          ))}
          <ViewportSlot>
            <span className={cx('flicking-arrow-prev', 'btn_flicking', 'main_prev')}></span>
            <span className={cx('flicking-arrow-next', 'btn_flicking', 'main_next')}></span>
          </ViewportSlot>
        </Flicking>
      </div>
    </div>
  );
};

export default BannerScrollList;
