import { useState, useEffect } from 'react'
import styled from 'styled-components/macro'

type WmType = {
  leftWm: number,
  topWm: number,
}

export const ScWaterMark = styled.div<WmType>`
  position: absolute;
  top: ${({ topWm }) => `${topWm}%`};
  left: ${({ leftWm }) => `${leftWm}%`};
  z-index: 1;
  opacity: 1;
  color: white;
`

type WaterMarkProps = {
  value: string | number | undefined,
}

export const WaterMark = ({ value }: WaterMarkProps) => {
  const [topWm, setTopWm] = useState(0)
  const [leftWm, setLeftWm] = useState(0)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const interval = setInterval(() => {
      setLeftWm(Math.floor(Math.random() * 95))
      setTopWm(Math.floor(Math.random() * 95))
      setVisible((v) => !v)
    }, 1000 * 10)
    return () => clearInterval(interval)
  }, [])

  return visible ? (
    <ScWaterMark
      topWm={topWm}
      leftWm={leftWm}
    >
      {value}
    </ScWaterMark>
  ) : null
}
