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

interface ProductInfoProps {
  data: MarketNFTData
}

const ProductInfo = (props: ProductInfoProps) => {

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

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

  const toShare = (type: "cast" | "sell") => {
    if (type === 'cast') {
      if (data.cast_id === userInfo.id) {
        push('/share')
        return
      }

      if (data.cast_show === 1) {
        push('/noShare', { id: data.cast_id })
      } else {
        Toast.fail('對方未開放')
      }
    }
    if (type === 'sell') {
      if (data.sell_id === userInfo.id) {
        push('/share')
        return
      }
      if (data.sell_show === 1) {
        push('/noShare', { id: data.sell_id })
      } else {
        Toast.fail('對方未開放')
      }
    }
  }

  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 === 1 && !visibleTime && <div className='row-center mt-1'>
        <CountDown time={data.end_Time * 1000 - Date.now()} className="fz-18 fz-wb-550" style={{ letterSpacing: 2 }} onFinish={() => setVisibleTime(true)} />
      </div>}
      {data.type === 3 && !visibleTime && <div className='row-center mt-1'>
        <CountDown time={data.start_time * 1000 - Date.now()} className="fz-18 fz-wb-550" style={{ letterSpacing: 2 }} onFinish={() => setVisibleTime(true)} />
      </div>}
      {data.type !== 0 && <div className='mt-1 row-center'>
        {data.type !== 3 && <i className={`iconfont icon-daohangshoucangyishoucang fz-20 ${isLike(data.id, likeNft) ? 'like-text' : 'sub-text'} mr-4`} onClick={() => setLike(data.id)} />}
        <i className='iconfont icon-shangchuandaochu fz-24' 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 onClick={() => toShare('cast')}>
          <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>
        {data.type === 3 ? (
          <div className={`mt-5 row-items fz-14 ${data.symbol}-text`}>
            <div>當前編號：{data.current_number}</div>
            <div className='ml-1'>剩餘數量：{data.remain_quantity}</div>
          </div>
        ) : (
          <div onClick={() => toShare('sell')}>
            <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)