import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.tsx';
import './index.css';

// Safe polyfill for CanvasRenderingContext2D.prototype.roundRect to support older browsers/safari
if (typeof window !== 'undefined' && typeof CanvasRenderingContext2D !== 'undefined' && !CanvasRenderingContext2D.prototype.roundRect) {
  CanvasRenderingContext2D.prototype.roundRect = function (
    this: CanvasRenderingContext2D,
    x: number,
    y: number,
    w: number,
    h: number,
    r?: number | number[]
  ) {
    let radii: [number, number, number, number] = [0, 0, 0, 0];
    if (typeof r === 'number') {
      radii = [r, r, r, r];
    } else if (Array.isArray(r)) {
      if (r.length === 1) radii = [r[0], r[0], r[0], r[0]];
      else if (r.length === 2) radii = [r[0], r[1], r[0], r[1]];
      else if (r.length === 3) radii = [r[0], r[1], r[2], r[1]];
      else if (r.length >= 4) radii = [r[0], r[1], r[2], r[3]];
    }
    const [rLT, rRT, rRB, rLB] = radii;
    this.beginPath();
    this.moveTo(x + rLT, y);
    this.lineTo(x + w - rRT, y);
    this.quadraticCurveTo(x + w, y, x + w, y + rRT);
    this.lineTo(x + w, y + h - rRB);
    this.quadraticCurveTo(x + w, y + h, x + w - rRB, y + h);
    this.lineTo(x + rLB, y + h);
    this.quadraticCurveTo(x, y + h, x, y + h - rLB);
    this.lineTo(x, y + rLT);
    this.quadraticCurveTo(x, y, x + rLT, y);
    this.closePath();
    return this;
  };
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);