import React, {useState, useEffect} from 'react'

const Popup = ({popup}) => {
  const [visible, setVisible] = useState(false)
  const {
    content = null,
    time = null,
    error = null,
    yes = null,
    no = null,
  } = popup

  useEffect(() => {
    setVisible(true)
    time && setTimeout(() => setVisible(false), time)
  }, [popup])

  if (!content) return null

  return visible ? (
    <div className={`window window--popup${error ? ' window--error' : ''}`}>
      <div className="window__content--popup">{ content }</div>
      {
        (yes || no) && (<div className="window__buttons--popup">
          {[yes, no].map(a => a && <input key={a.label} className='window__button' type="button" onClick={() => { setVisible(false); a.action() }} value={a.label} />)}
        </div>)
      }
    </div>
  ) : null
}

export default Popup