import { CSSProperties } from 'react'

type LoadingBrandedTypes = {
  loadProgress: number // Percentage
  label?: string
  hasError?: boolean
}

export default function LoadingBranded({
  loadProgress,
  label,
  hasError = false,
}: LoadingBrandedTypes) {
  // Drive the colour reveal from the load progress: the four circles start
  // de-saturated and "warm up" to full colour as the project loads, while
  // each circle keeps drifting on its own little orbit (see the CSS).
  const saturation = Math.max(0, Math.min(1, loadProgress / 100))

  return (
    <>
      <div className="loading-screen-brand-container">
        <svg
          className="verso-loader"
          viewBox="0 0 200 200"
          role="img"
          aria-label="Verso"
          style={
            {
              '--verso-loader-saturation': saturation,
            } as CSSProperties
          }
        >
          <defs>
            <clipPath id="verso-loader-clip">
              <rect x="0" y="0" width="200" height="200" rx="44" />
            </clipPath>
          </defs>
          <g clipPath="url(#verso-loader-clip)">
            <rect x="0" y="0" width="200" height="200" fill="#0a0a0a" />
            <g className="verso-loader-circles">
              <circle
                className="verso-loader-c1"
                cx="72"
                cy="72"
                r="68"
                fill="#447099"
                fillOpacity="0.82"
              />
              <circle
                className="verso-loader-c2"
                cx="128"
                cy="72"
                r="68"
                fill="#72994E"
                fillOpacity="0.82"
              />
              <circle
                className="verso-loader-c3"
                cx="72"
                cy="128"
                r="68"
                fill="#EE6331"
                fillOpacity="0.75"
              />
              <circle
                className="verso-loader-c4"
                cx="128"
                cy="128"
                r="68"
                fill="#4a6fa5"
                fillOpacity="0.80"
              />
            </g>
            <text
              className="verso-loader-v"
              x="100"
              y="164"
              fontFamily="'EB Garamond', Georgia, serif"
              fontSize="170"
              fontWeight="400"
              textAnchor="middle"
              fill="white"
              fillOpacity="0.97"
            >
              V
            </text>
          </g>
        </svg>
      </div>

      {!hasError && (
        <div className="h3 loading-screen-label" aria-live="polite">
          {label}
          <span className="loading-screen-ellip" aria-hidden="true">
            .
          </span>
          <span className="loading-screen-ellip" aria-hidden="true">
            .
          </span>
          <span className="loading-screen-ellip" aria-hidden="true">
            .
          </span>
        </div>
      )}
    </>
  )
}