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 { INFT } from 'metarare';

const cx = classNames.bind(styles);

interface IOwnProps {
  list: INFT[];
};

const PANEL_COUNT = 5;

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

  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) => (
                <NFTCard
                  key={`${item.sale_id}_${index}`}
                  saleId={item.sale_id}
                  content_title={item.content_title}
                  collectionThumb={item.collection_thumbnail_image}
                  collectionName={item.collection_name}
                  authorThumb={item.owner_thumbnail_image}
                  authorName={item.owner_name}
                  thumbURL={item.content_url}
                  price={item.current_price}
                  currency={item.current_currency}
                  saleType={item.sale_type}
                  totalCount={item.total_count}
                  tokenId={item.token_id}
                  likeCount={item.likes}
                  isLike={item.is_like}
                  endTime={item.end_at}
                  startPrice={item.start_price}
                  userId={item.user_id}
                  itemIndex={item.item_index}
                  fixedPrice={item.fixed_price}
                  status={item.sale_status}
                  lastestPrice={item.lastest_price}
                  lastestCurrency={item.lastest_currency}
                  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 NFTScrollList;
