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 './NFTScrollList.scss';
import NFTCard from '@src/components/common/NFTCard';
import { IArtist, INFT } from 'metarare';
import ArtistCard from '../common/ArtistCard';

const cx = classNames.bind(styles);

interface IOwnProps {
  list: IArtist[];
};

const PANEL_COUNT = 7;

const ArtistScrollList: React.FC<IOwnProps> = ({
  list
}) => {
  const plugins = [new Arrow()];
  const [panel, setPanel] = useState<IArtist[][]>([]);

  useEffect(() => {
    if (list?.length) {
      const panel = [];
      for (let i = 0; i < list.length; i += PANEL_COUNT) {
        panel.push(list.slice(i, i + PANEL_COUNT));
      }

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

  return (
    <div className={cx('nft_scroll')}>
      {!!panel.length && (
        <Flicking plugins={plugins}>
          {panel?.map((list, index) => (
            <div className={cx('nft_panel')} key={index}>
              {list.map((item, index) => (
                <ArtistCard {...item} key={index} className='scroll' />
              ))}
            </div>
          ))}
          <ViewportSlot>
            <div className={cx('pc_wrapper')}>
              <span className={cx('flicking-arrow-prev', 'btn_flicking', 'main_prev')}></span>
              <span className={cx('flicking-arrow-next', 'btn_flicking', 'main_next')}></span>
            </div>
          </ViewportSlot>
        </Flicking>
      )}
    </div>
  );
};

export default ArtistScrollList;
