import React, { useEffect } from 'react';
import classNames from 'classnames/bind';
import styles from './TabBid.scss';
import CircleThumb from '../CircleThumb';
import URLInfo from '@src/constants/URLInfo';
import { useDispatch, useSelector } from 'react-redux';
import { fetchBid } from '@src/store/reducers/SaleReducer';
import TimeUtil from '@src/utils/TimeUtil';
import { useLocation } from 'react-router';
import { selectedCurrency } from '@src/components/common/InputPrice'

const cx = classNames.bind(styles);

const TabBid: React.FC = () => {
  const location = useLocation();
  const dispatch = useDispatch();
  const id = URLInfo.getId();
  const { bid } = useSelector(store => store.sale);

  useEffect(() => {
    dispatch(fetchBid(id));
  }, [location.pathname]);

  return (
    <div className={cx('tab_bid')}>
      {bid.length ? (
        <ul className={cx('history_list')}>
          {bid.map(item => (
            <li className={cx('item')} key={item.created_at}>
              <div className={cx('thumb_area')}>
                <CircleThumb
                  thumbSrc={item.thumbnail_image}
                  width={30}
                  height={30}
                  isOfficial={item.is_official}
                  officialWidth={10}
                  officialHeight={10}
                />
              </div>
              <div className={cx('info_area')}>
                <div className={cx('price_box')}>
                  Bid
                  {item.is_cancel ? (
                    <del className={cx('price')}>
                      {item.price} {selectedCurrency(item.currency)}
                    </del>
                  ) : (
                    <span className={cx('price')}>
                      {item.price} {selectedCurrency(item.currency)}
                    </span>
                  )}
                </div>
                <div className={cx('info_box')}>
                  by
                  <span className={cx('user')}>
                    <span className={cx('name')}>
                      {item.name}
                    </span>
                  </span>
                  <span className={cx('date')}>
                    {TimeUtil.getPeriodTimeString(item.created_at)}
                  </span>
                </div>
              </div>
            </li>
          ))}
        </ul>
      ) : (
        <div className={cx('no_result')}>
          입찰을 기다리고 있습니다.
        </div>
      )}
    </div>
  );
};

export default TabBid;
