import { observer } from 'mobx-react'
import { useState } from 'react'
import useLike from '~/hooks/useLike'
import store from '~/store'
import '~/styles/components.scss'
import { MarketNFTData } from '~/types/store'
import { toThousands } from '~/utils'
import { copy } from '~/utils/copy'
import Modal from './Modal'

interface ProductInfoProps {
  data: MarketNFTData
}

const ProductInfo = (props: ProductInfoProps) => {

  const { data } = props
  const { likeNft } = store.state
  const { setLike, isLike } = useLike()
  const [visible, setVisible] = useState(false)

  const share = () => {
    const pathname = `${process.env.REACT_APP_SHARE_LINK}detail?id=${data.id}&type=${data.type}`
    copy(pathname)
    setVisible(true)
  }

  return (
    <div className='product-info'>
      <div className='row-center'>
        <div className='cover-box row-center'>
          <img src={data.url} className="img" alt="" />
        </div>
      </div>
      {data.type !== 0 && <div className='mt-1 row-center'>
        <i className={`iconfont icon-daohangshoucangyishoucang fz-20 ${isLike(data.id, likeNft) ? 'like-text' : 'sub-text'}`} onClick={() => setLike(data.id)} />
        <i className='iconfont icon-shangchuandaochu fz-24 ml-4' onClick={share} />
      </div>}
      <div className='mt-3 fz-30 fz-wb-550'>{data.name}</div>
      <div className={`price-tag mt-1 ${data.symbol}-bg`}>{data.symbol} {toThousands(data.price)}</div>
      <div className='mt-3 row-between'>
        <div>
          <div>铸造者</div>
          <div className='user-tag mt-2 plr-1 row-items'>
            <img src={data.cast_url} alt="" />
            <div className='fz-12 tac flex-1 name-overflow'>{data.cast_name}</div>
          </div>
        </div>
        <div>
          <div>售卖者</div>
          <div className='user-tag mt-2 plr-1 row-items'>
            <img src={data.sell_url} alt="" />
            <div className='fz-12 tac flex-1 name-overflow'>{data.sell_name}</div>
          </div>
        </div>
      </div>
      <Modal
        visible={visible}
        title="分享給朋友"
        setVisible={setVisible}
        showConfirmButton
        backgroundColosed
      >
        <div className='tac mt-2 like-text'>
          已複製鏈接
        </div>
      </Modal>
    </div>
  )
}

export default observer(ProductInfo)