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

const cx = classNames.bind(styles);

const TabHistory: React.FC = () => {
  const location = useLocation();
  const dispatch = useDispatch();
  const { log } = useSelector(store => store.token);
  const { data: saleData } = useSelector(store => store.sale);
  const { data: tokenData } = useSelector(store => store.token);

  useEffect(() => {
    const id = URLInfo.isSalePage() ? saleData?.sale.token_id : tokenData?.token.id;

    if (id) {
      dispatch(fetchLog(id));
    }
  }, [location.pathname]);

  return (
    <div className={cx('tab_history')}>
      {log?.length ? (
        <ul className={cx('history_list')}>
          {log.map(item => (
            <li className={cx('item')} key={item.log_relation_id}>
              <div className={cx('thumb_area')}>
                <CircleThumb
                  thumbSrc={item.from_user_profile}
                  width={30}
                  height={30}
                  isOfficial={item.from_user_is_artist}
                  officialWidth={10}
                  officialHeight={10}
                />
              </div>
              <div className={cx('info_area')}>
                <div className={cx('price_box')}>
                  {item.log_type === EActivity.CREATE && (
                    '등록'
                  )}
                  {item.log_type === EActivity.PURCHASE && (
                    <>
                      <span className={cx('type')}>구매</span>
                      <span className={cx('price')}>{Number(item.price)} {selectedCurrency(item.currency)}</span>
                    </>
                  )}
                  {item.log_type === EActivity.SELL && (
                    <>
                      <span className={cx('type')}>판매</span>
                      <span className={cx('price')}>{Number(item.price)} {selectedCurrency(item.currency)}</span>
                    </>
                  )}
                  {item.log_type === EActivity.TRANSFER && (
                    <>
                      전송 from
                      {item.to_user_name ? (
                        <span className={cx('name')}>
                          {item.to_user_name}
                        </span>
                      ) : (
                        <span className={cx('wallet')}>
                          {item.to_address}
                        </span>
                      )}
                    </>
                  )}
                  {item.log_type === EActivity.BURN && (
                    '삭제'
                  )}
                  {item.log_type === EActivity.BID && (
                    <>
                      <span className={cx('type')}>{item.is_cancel ? '입찰취소' : '입찰'}</span>
                      {item.is_cancel ? (
                        <del className={cx('price')}>{Number(item.price)} {selectedCurrency(item.currency)}</del>
                      ) : (
                        < span className={cx('price')}>{Number(item.price)} {selectedCurrency(item.currency)}</span>
                      )}
                    </>
                  )}
                </div>
                <div className={cx('info_box')}>
                  {item.log_type === EActivity.CREATE && (
                    <>
                      by
                      <span className={cx('user')}>
                        <span className={cx('name')}>
                          {item.from_user_name}
                        </span>
                      </span>
                    </>
                  )}
                  {(item.log_type === EActivity.PURCHASE) && (
                    <>
                      by
                      <span className={cx('user')}>
                        {item.from_user_name ? (
                          <span className={cx('name')}>
                            {item.from_user_name}
                          </span>
                        ) : (
                          <span className={cx('wallet')}>
                            {item.from_address}
                          </span>
                        )}
                      </span>
                    </>
                  )}
                  {item.log_type === EActivity.SELL && (
                    <>
                      by
                      <span className={cx('user')}>
                        {item.from_user_name ? (
                          <span className={cx('name')}>
                            {item.from_user_name}
                          </span>
                        ) : (
                          <span className={cx('wallet')}>
                            {item.from_address}
                          </span>
                        )}
                      </span>
                    </>
                  )}
                  {item.log_type === EActivity.TRANSFER && (
                    <>
                      to
                      <span className={cx('user')}>
                        {item.from_user_name ? (
                          <span className={cx('name')}>
                            {item.from_user_name}
                          </span>
                        ) : (
                          <span className={cx('wallet')}>
                            {item.from_address}
                          </span>
                        )}
                      </span>
                    </>
                  )}
                  {item.log_type === EActivity.BURN && (
                    <>
                      from
                      <span className={cx('user')}>
                        <span className={cx('name')}>
                          {item.from_user_name}
                        </span>
                      </span>
                    </>
                  )}
                  {item.log_type === EActivity.BID && (
                    <>
                      by
                      <span className={cx('user')}>
                        <span className={cx('name')}>
                          {item.from_user_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 TabHistory;
