import React from 'react';
import classNames from 'classnames/bind';

import styles from './ActivityCard.scss';

import CircleThumb from '@src/components/common/CircleThumb';
import { ReactComponent as IconHeart } from '@assets/img/svg/ico_activity_like.svg';
import { ReactComponent as IconBid } from '@assets/img/svg/ico_activity_bid.svg';
import { ReactComponent as IconSell } from '@assets/img/svg/ico_activity_sell.svg';
import { ReactComponent as IconCreate } from '@assets/img/svg/ico_activity_create.svg';
import { ReactComponent as IconTransfer } from '@assets/img/svg/ico_activity_transfer.svg';
import { ReactComponent as IconBurn } from '@assets/img/svg/ico_activity_burn.svg';
import { ReactComponent as IconPurchase } from '@assets/img/svg/ico_activity_purchase.svg';
import { ECurrencyType, EActivity, ESaleStatus } from '@src/constants/Enums';
import TimeUtil from '@src/utils/TimeUtil';
import { useHistory } from 'react-router-dom';
import URLInfo from '@src/constants/URLInfo';
import FileUtil from '@src/utils/FileUtil';
import { selectedCurrency } from '@src/components/common/InputPrice'

const cx = classNames.bind(styles);

interface IOwnProps {
  title: string;
  thumbUrl: string;
  fromUserThumbSrc: string;
  fromUserName: string;
  toUserThumbSrc: string;
  toUserName: string;
  createdAt: string;
  logType: EActivity;
  price: string;
  currency: ECurrencyType;
  isCancle: boolean;
  toAddress: string;
  fromAddress: string;
  saleId: number;
  tokenId: number;
  fromUserIsArtist: boolean;
  toUserIsArtist: boolean;
};

const ActivityCard: React.FC<IOwnProps> = ({
  title,
  thumbUrl,
  fromUserThumbSrc,
  fromUserName,
  toUserThumbSrc,
  toUserName,
  createdAt,
  logType,
  price,
  currency,
  isCancle,
  toAddress,
  fromAddress,
  saleId,
  tokenId,
  fromUserIsArtist,
  toUserIsArtist
}) => {
  const history = useHistory();

  const handleClick = () => {
    if (saleId) {
      history.push(URLInfo.getSaleUrl(saleId));
    } else {
      history.push(URLInfo.getTokenUrl(tokenId));
    }
  };

  return (
    <button type="button" className={cx('activity_card')} onClick={handleClick}>
      <div className={cx('thumb_wrap')}>
        {FileUtil.isVideo(thumbUrl) ? (
          <video src={thumbUrl} width="70" height="70" className={cx('thumb')} autoPlay muted playsInline />
        ) : (
          <CircleThumb thumbSrc={thumbUrl} width={70} height={70} />
        )}
        {logType === EActivity.LIKE && (
          <IconHeart className={cx('ico_activity')} />
        )}
        {logType === EActivity.PURCHASE && (
          <IconPurchase className={cx('ico_activity')} />
        )}
        {logType === EActivity.SELL && (
          <IconSell className={cx('ico_activity')} />
        )}
        {logType === EActivity.BID && (
          <IconBid className={cx('ico_activity')} />
        )}
        {logType === EActivity.CREATE && (
          <IconCreate className={cx('ico_activity')} />
        )}
        {logType === EActivity.TRANSFER && (
          <IconTransfer className={cx('ico_activity')} />
        )}
        {logType === EActivity.BURN && (
          <IconBurn className={cx('ico_activity')} />
        )}
      </div>
      <div className={cx('info_wrap')}>
        <strong className={cx('title')}>{title}</strong>
        {logType === EActivity.LIKE && (
          <div className={cx('user_info')}>
            <span className={cx('type')}>좋아요</span>
            <span className={cx('guide_text')}>by</span>
            <CircleThumb
              thumbSrc={fromUserThumbSrc}
              width={20}
              height={20}
              isOfficial={fromUserIsArtist}
              officialWidth={8}
              officialHeight={8}
            />
            <span className={cx('name')}>{fromUserName || fromAddress}</span>
          </div>
        )}
        {logType === EActivity.PURCHASE && (
          <>
            <div className={cx('user_info')}>
              <span className={cx('type')}>구매</span>
              <span className={cx('guide_text')}>from</span>
              <CircleThumb
                thumbSrc={fromUserThumbSrc}
                width={20}
                height={20}
                isOfficial={fromUserIsArtist}
                officialWidth={8}
                officialHeight={8}
              />
              <span className={cx('name')}>{fromUserName || fromAddress}</span>
            </div>
            <div className={cx('user_info')}>
              <span className={cx('guide_text')}>to</span>
              {toUserName ? (
                <>
                  <CircleThumb
                    thumbSrc={toUserThumbSrc}
                    width={20}
                    height={20}
                    isOfficial={toUserIsArtist}
                    officialWidth={8}
                    officialHeight={8}
                  />
                  <span className={cx('name')}>{toUserName}</span>
                </>
              ) : (
                <span className={cx('send_address')}>{toAddress}</span>
              )}
            </div>
          </>
        )}
        {logType === EActivity.SELL && (
          <>
            <div className={cx('user_info')}>
              <span className={cx('type')}>판매</span>
              <span className={cx('guide_text')}>by</span>
              <CircleThumb
                thumbSrc={fromUserThumbSrc}
                width={20}
                height={20}
                isOfficial={fromUserIsArtist}
                officialWidth={8}
                officialHeight={8}
              />
              <span className={cx('name')}>{fromUserName || fromAddress}</span>
            </div>
            <div className={cx('price_info')}>
              <span className={cx('guide_text')}>for</span>
              {isCancle ? (
                <del className={cx('price')}>{Number(price)} {selectedCurrency(currency)}</del>
              ) : (
                < span className={cx('price')}>{Number(price)} {selectedCurrency(currency)}</span>
              )}
            </div>
          </>
        )}
        {logType === EActivity.BID && (
          <>
            <div className={cx('user_info')}>
              <span className={cx('type')}>{isCancle ? '입찰취소' : '입찰'}</span>
              <span className={cx('guide_text')}>by</span>
              <CircleThumb
                thumbSrc={fromUserThumbSrc}
                width={20}
                height={20}
                isOfficial={fromUserIsArtist}
                officialWidth={8}
                officialHeight={8}
              />
              <span className={cx('name')}>{fromUserName || fromAddress}</span>
            </div>
            <div className={cx('price_info')}>
              <span className={cx('guide_text')}>for</span>
              {isCancle ? (
                <del className={cx('price')}>{Number(price)} {selectedCurrency(currency)}</del>
              ) : (
                < span className={cx('price')}>{Number(price)} {selectedCurrency(currency)}</span>
              )}
            </div>
          </>
        )}
        {logType === EActivity.CREATE && (
          <div className={cx('user_info')}>
            <span className={cx('type')}>등록</span>
            <span className={cx('guide_text')}>by</span>
            <CircleThumb
              thumbSrc={fromUserThumbSrc}
              width={20}
              height={20}
              isOfficial={fromUserIsArtist}
              officialWidth={8}
              officialHeight={8}
            />
            <span className={cx('name')}>{fromUserName || fromAddress}</span>
          </div>
        )}
        {logType === EActivity.TRANSFER && (
          <>
            <div className={cx('user_info')}>
              <span className={cx('type')}>전송</span>
              <span className={cx('guide_text')}>from</span>
              <CircleThumb
                thumbSrc={fromUserThumbSrc}
                width={20}
                height={20}
                isOfficial={fromUserIsArtist}
                officialWidth={8}
                officialHeight={8}
              />
              <span className={cx('name')}>{fromUserName || fromAddress}</span>
            </div>
            <div className={cx('price_info')}>
              <div className={cx('send_info')}>
                <span className={cx('guide_text')}>to</span>
                {toUserName ? (
                  <>
                    <CircleThumb
                      thumbSrc={toUserThumbSrc}
                      width={20}
                      height={20}
                      isOfficial={toUserIsArtist}
                      officialWidth={8}
                      officialHeight={8}
                    />
                    <span className={cx('name')}>{toUserName}</span>
                  </>
                ) : (
                  <span className={cx('send_address')}>{toAddress}</span>
                )}
              </div>
            </div>
          </>
        )}
        {logType === EActivity.BURN && (
          <div className={cx('user_info')}>
            <span className={cx('type')}>삭제</span>
            <span className={cx('guide_text')}>from</span>
            <CircleThumb
              thumbSrc={fromUserThumbSrc}
              width={20}
              height={20}
              isOfficial={fromUserIsArtist}
              officialWidth={8}
              officialHeight={8}
            />
            <span className={cx('name')}>{fromUserName || fromAddress}</span>
          </div>
        )}
        <div className={cx('time')}>{TimeUtil.getPeriodTimeString(createdAt)}</div>
      </div>
    </button >
  );
};

export default ActivityCard;
