import { has } from '../helpers'

const TUB_INSIDE = 'M40 64 L360 64 L338 204 Q335 214 324 214 L76 214 Q65 214 62 204 Z'

function wavePath(y: number) {
  let d = `M-100 ${y}`
  for (let i = 0; i < 6; i++) d += ' q25 -7 50 0 q25 7 50 0'
  return `${d} L500 240 L-100 240 Z`
}

function Duck() {
  return (
    <g className="duck-bob" aria-hidden="true">
      <ellipse cx="14" cy="18" rx="16" ry="10" fill="#facc15" />
      <path d="M4 16 q8 -6 14 2" fill="none" stroke="#eab308" strokeWidth="2" strokeLinecap="round" />
      <circle cx="25" cy="6" r="8" fill="#facc15" />
      <path d="M32 5 l8 2 l-8 3 z" fill="#f97316" />
      <circle cx="27" cy="4" r="1.6" fill="#1e293b" />
    </g>
  )
}

export function TubGraphic({ tempF, steaming }: { tempF: number | null; steaming: boolean }) {
  const label = has(tempF) ? `${tempF.toFixed(1)}°F` : '--.-°F'
  const rivets = [60, 110, 160, 210, 260, 310, 340].map((x) => (
    <circle key={x} className="rivet" cx={x} cy="65" r="2.2" />
  ))
  return (
    <svg className="tub" viewBox="0 0 400 240" role="img" aria-label="Tub water temperature">
      <defs>
        <clipPath id="tub-inside">
          <path d={TUB_INSIDE} />
        </clipPath>
        <linearGradient id="water-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#38bdf8" />
          <stop offset="1" stopColor="#0369a1" />
        </linearGradient>
        <linearGradient id="steel-grad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#94a3b8" />
          <stop offset="0.5" stopColor="#f1f5f9" />
          <stop offset="1" stopColor="#94a3b8" />
        </linearGradient>
      </defs>
      <ellipse className="ground" cx="200" cy="222" rx="170" ry="10" />
      <g className={`steam${steaming ? ' on' : ''}`} aria-hidden="true">
        <path className="steam-puff" d="M140 52 q-8 -10 0 -20 t0 -20" />
        <path className="steam-puff" d="M200 52 q-8 -10 0 -20 t0 -20" />
        <path className="steam-puff" d="M260 52 q-8 -10 0 -20 t0 -20" />
      </g>
      <path className="tub-shell" d={TUB_INSIDE} />
      <g clipPath="url(#tub-inside)">
        <g className="wave wave-back">
          <path d={wavePath(90)} fill="#7dd3fc" />
        </g>
        <g className="wave wave-front">
          <path d={wavePath(96)} fill="url(#water-grad)" />
        </g>
      </g>
      <path className="tub-wall" d={TUB_INSIDE} />
      <rect className="tub-rim" x="22" y="58" width="356" height="14" rx="7" fill="url(#steel-grad)" />
      {rivets}
      <g transform="translate(286 72)">
        <Duck />
      </g>
      <text className="tub-temp" x="200" y="165" textAnchor="middle">
        {label}
      </text>
      <text className="tub-temp-caption" x="200" y="190" textAnchor="middle">
        water
      </text>
    </svg>
  )
}