import React, { useState } from 'react'
import { Hot } from '../../store/hots';
import style from './style.module.css'
import { HotModal, Item } from './component'
import { Image } from 'antd'

export type Props = Hot & { left: number, top: number }

export function ShowHot(props: Props) {
  const [showModal, setShowModal] = useState(false)
  const inlineStyle = {
    left: props.left + 'px',
    top: props.top + 'px'
  }
  const metaEle = {
    'image': <Image src={props.meta?.url} alt={props.meta?.type} />
  }
  const items: Item[] = []
  let width = 520

  if (props.link) {
    width = 980
    items.push({
      ele: <iframe src={props.link} title={props.title} className={style['iframe']} />
    })
  } else {
    if (props.meta) {
      items.push({
        label: '多媒体',
        ele: metaEle[props.meta.type]
      })
    }
    if (props.content) {
      items.push({
        label: '热点内容',
        ele: <div>{props.content}</div>
      })
    }
  }

  return (
    <>
      <div style={inlineStyle} className={style['show-hot']} onClick={() => setShowModal(true)}>
        <img src="https://laser-oss.4dkankan.com/icon/lQLPDhrvVzvNvTswMLAOU-UNqYnnZQG1YPJUwLwA_48_48.png" alt="label" />
      </div>
      {showModal && 
        <HotModal 
          width={width} 
          title={props.title} 
          items={items} 
          enter={() => setShowModal(false)} 
          cancel={() => setShowModal(false)} 
        /> 
      }
    </>
  )
}