import { createCanvas, registerFont } from 'canvas';

export const genResults = async (game, winners, winnings, accuracy) => {
  const roundRect = (ctx, x, y, width, height, radius, fill, stroke) => {
    if (typeof stroke === 'undefined') {
      stroke = true;
    }
    if (typeof radius === 'undefined') {
      radius = 5;
    }
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
    if (stroke) {
      ctx.stroke();
    }
    if (fill) {
      ctx.fill();
    }
  };

  const canvas = createCanvas(450, 230);
  const ctx = canvas.getContext('2d');
  registerFont('src/utils/CircularStd-Black.ttf', { family: 'Circular' });
  registerFont('src/utils/CircularStd-Medium.ttf', { family: 'CircularMed', weight: 100 });
  switch (game) {
    case 'HQ Trivia':
      ctx.fillStyle = 'rgba(52, 58, 153, 1)';
      ctx.strokeStyle = 'rgba(54, 60, 152, 1)';
      break;
    case 'Loco Trivia':
      ctx.fillStyle = 'rgba(39, 32, 69, 1)';
      ctx.strokeStyle = 'rgba(39, 32, 69, 1)';
      break;
    case 'Confetti Trivia':
      ctx.fillStyle = 'rgba(66, 102, 171, 1)';
      ctx.strokeStyle = 'rgba(66, 102, 171, 1)';
      break;
    default:
      ctx.fillStyle = 'rgba(52, 58, 153, 1)';
      ctx.strokeStyle = 'rgba(54, 60, 152, 1)';
      break;
  }
  roundRect(ctx, 0, 0, canvas.width, canvas.height, 40, true, true);
  ctx.fillStyle = 'white';
  ctx.font = '45px Circular';
  ctx.fillText(game, (canvas.width / 2) - (ctx.measureText(game).width / 2), 70);
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 5;
  roundRect(ctx, 2, 2, canvas.width - 4, canvas.height - 4, 40, false, true);
  ctx.beginPath();
  ctx.moveTo((canvas.width / 2) - (ctx.measureText(game).width / 2), 80);
  ctx.lineTo((canvas.width / 2) + (ctx.measureText(game).width / 2), 80);
  ctx.stroke();
  ctx.font = '25px CircularMed';
  ctx.fillText(`${winners.toLocaleString('en')} players won ${winnings}`, (canvas.width / 2) - (ctx.measureText(`${winners.toLocaleString('en')} Players won ${winnings}`).width / 2), 125);
  ctx.fillText(`Accuracy: ${accuracy}`, (canvas.width / 2) - (ctx.measureText(`Accuracy: ${accuracy}`).width / 2), 165);
  ctx.font = '15px Circular';
  ctx.fillText('Trivia Orchard | invite.gg/orchard', (canvas.width / 2) - (ctx.measureText('Trivia Orchard | invite.gg/orchard').width / 2), canvas.height - 20);
  return canvas.toBuffer();
};

export const getWordsImage = (puzzleState) => {
  const puzzleStateLengths = puzzleState.map(i => i.length);
  const biggestLength = Math.max(...puzzleStateLengths);
  const canvas = createCanvas(biggestLength * 90 + 100, puzzleState.length * 130 + 75);
  const ctx = canvas.getContext('2d');
  registerFont('src/utils/CircularStd-Black.ttf', { family: 'Circular' });
  registerFont('src/utils/CircularStd-Medium.ttf', { family: 'CircularMed', weight: 100 });

  const roundRect = (ctx, x, y, width, height, radius, fill, stroke) => {
    if (typeof stroke === 'undefined') {
      stroke = true;
    }
    if (typeof radius === 'undefined') {
      radius = 5;
    }
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
    if (stroke) {
      ctx.stroke();
    }
    if (fill) {
      ctx.fill();
    }
  };

  const wordsLetter = (ctx, letter, x, y, scale) => {
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'white';
    ctx.shadowBlur = 10;
    ctx.shadowColor = 'black';
    roundRect(ctx, x, y, scale * 40, scale * 50, 10, true, true);
    ctx.fillStyle = 'black';
    const fontSize = 25 * scale;
    ctx.font = `${fontSize}px Circular`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.shadowBlur = 0;
    ctx.fillText(letter, x + 20 * scale, y + 25 * scale);
  };

  let x = 50;
  let y = 50;
  // eslint-disable-next-line no-restricted-syntax
  for (const state of puzzleState) {
    // eslint-disable-next-line no-restricted-syntax
    for (const letter of state) {
      wordsLetter(ctx, letter, x, y, 2);
      x += 90;
    }
    x = 50;
    y += 130;
  }
  return canvas.toBuffer();
};