import React from 'react';
import classNames from 'classnames/bind';
import styles from './TabDetail.scss';
import CircleThumb from '../CircleThumb';
import { ReactComponent as LogoEhtereum } from '@assets/img/svg/logo_ethereum.svg';
import { ReactComponent as LogoMetafinance } from '@assets/img/svg/logo_metafinance.svg';
import { useSelector } from 'react-redux';
import { ENetworkType } from '@src/constants/Enums';
import { Link } from 'react-router-dom';
import URLInfo from '@src/constants/URLInfo';

const cx = classNames.bind(styles);

const TabDetail: React.FC = () => {
  const { data: saleData } = useSelector(store => store.sale);
  const { data: tokenData } = useSelector(store => store.token);

  const data = URLInfo.isSalePage() ? saleData?.sale : tokenData?.token;
  const traits = URLInfo.isSalePage() ? saleData?.traits : tokenData?.traits;

  return (
    <div className={cx('tab_detail')}>
      <Link to={URLInfo.getProfileUserUrl(data?.user_name || '')} className={cx('info_area')}>
        <div className={cx('title_box')}>소유자</div>
        <div className={cx('info_box')}>
          <div className={cx('thumb')}>
            <CircleThumb
              thumbSrc={data?.user_profile_image}
              width={30}
              height={30}
              isOfficial={data?.owner_is_official}
              officialWidth={10}
              officialHeight={10}
            />
          </div>
          <div className={cx('name')}>{data?.user_name}</div>
        </div>
      </Link>
      <div className={cx('info_area')}>
        <div className={cx('title_box')}>블록체인</div>
        <div className={cx('info_box')}>
          <div className={cx('thumb')}>
            {data?.network === ENetworkType.ETH && (
              <LogoEhtereum className={cx('logo')} />
            )}
            {data?.network === ENetworkType.BSC && (
              <i className={cx('logo', 'logo_bsc')}></i>
            )}
            {data?.network === ENetworkType.MF && (
              <LogoMetafinance className={cx('logo')} />
            )}
          </div>
          <div className={cx('name')}>
            {data?.network === ENetworkType.ETH && (
              'Ethereum'
            )}
            {data?.network === ENetworkType.BSC && (
              'BSC'
            )}
            {data?.network === ENetworkType.MF && (
              'MetaFinance'
            )}
          </div>
        </div>
      </div>
      {!!traits?.length && (
        <div className={cx('info_area')}>
          <div className={cx('title_box')}>특징</div>
          <ul className={cx('feature_list')}>
            {traits.map(item => (
              <li className={cx('item')} key={item.id}>
                <div className={cx('title')}>
                  {item.key}
                </div>
                <strong className={cx('info')}>
                  {item.value}
                </strong>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default TabDetail;
