import React, { useRef, useState } from 'react'
import { Button, ToasterContainer, ToasterType, AnimatedToaster } from 'react-icecream'

interface ToastInfo {
  id: number
  visible: boolean
  type: ToasterType
  message: string
}

export default function Demo() {
  const idxRef = useRef(0)
  const [toasts, setToasts] = useState<ToastInfo[]>([])

  function addItem() {
    const types: ToasterType[] = ['info', 'success', 'warning', 'error']
    idxRef.current++
    setToasts([
      ...toasts,
      { id: idxRef.current, visible: true, type: types[Math.ceil(Math.random() * 4)], message: '新消息来咯，类型随机。' }
    ])
  }

  function hideItem() {
    const newToasts = toasts.slice()
    const item = newToasts.find(it => it.visible)
    if (item != null) {
      item.visible = false
      setToasts(newToasts)
    }
  }

  return (
    <>
      <div style={{ marginBottom: '24px' }}>
        <Button onClick={addItem} style={{ marginRight: '12px' }}>点击添加一条消息</Button>
        <Button onClick={hideItem}>点击隐藏一条消息</Button>
      </div>
      <div style={{ position: 'relative', height: '200px', overflow: 'auto', border: '1px solid #efefef' }}>
        <ToasterContainer>
          {toasts.map(({ id, ...toast }) => <AnimatedToaster key={id} {...toast} />)}
        </ToasterContainer>
      </div>
    </>
  )
}