import { backgroundsArr } from './western-world.utils.constants';
import { getImageByUrl } from './western-world.utils.helpers';

export const drawBackgrounds = ({ ctx, BACKGROUND_X, BACKGROUND_Y, BACKGROUND_WIDTH, BACKGROUND_HEIGHT, language }) => {
  backgroundsArr.forEach(fileName =>
    ctx.drawImage(
      window.cachedImages[language].svgImagesForCanvas[fileName],
      BACKGROUND_X,
      BACKGROUND_Y,
      BACKGROUND_WIDTH,
      BACKGROUND_HEIGHT
    )
  );
};

export const drawBackgroundTopElements = ({
  ctx,
  BACKGROUND_X,
  BACKGROUND_Y,
  BACKGROUND_WIDTH,
  BACKGROUND_HEIGHT,
  language
}) => {
  ctx.drawImage(
    window.cachedImages[language].svgImagesForCanvas['background-top-elements'],
    BACKGROUND_X,
    BACKGROUND_Y,
    BACKGROUND_WIDTH,
    BACKGROUND_HEIGHT
  );
};

export const drawNewAdditionalStuff = ({ ctx, SIZE_X_QUALITY, PADDING_LEFT, PADDING_TOP, language }) => {
  ctx.drawImage(
    window.cachedImages[language].svgImagesForCanvas['colony-arrows'],
    295 * SIZE_X_QUALITY + PADDING_LEFT,
    145 * SIZE_X_QUALITY + PADDING_TOP,
    1025 * SIZE_X_QUALITY,
    1025 * SIZE_X_QUALITY
  );
};

export const drawFlags = ({ allCells, ctx, game, myIdKey, SIZE_X_QUALITY, PADDING_LEFT, PADDING_TOP, language }) => {
  if (!game.players) {
    return;
  }
  const myPlayer = game.players[myIdKey];
  const allMyCompanies = myPlayer?.firms;
  const allEnemyCompanies = game.players.order.reduce((previousValue, playerIdKey) => {
    if (playerIdKey === myPlayer?.user?.id_key) {
      return previousValue;
    }
    game.players[playerIdKey].firms.forEach(firmId => {
      previousValue[firmId] = playerIdKey;
    });
    return previousValue;
  }, {});
  allCells
    .filter(cell => cell.id)
    .forEach(cell => {
      let flag;
      let avatar;
      if (allEnemyCompanies[cell.id]) {
        flag = window.cachedImages[language].svgImagesForCanvas[`enemy-flag-stars-${game.stocks[cell.id].stars}`];
        avatar = window.cachedImages[language].avatarsMapForCanvas[allEnemyCompanies[cell.id]];
      }
      if (allMyCompanies?.includes(cell.id)) {
        flag = window.cachedImages[language].svgImagesForCanvas[`my-flag-stars-${game.stocks[cell.id].stars}`];
        avatar = window.cachedImages[language].avatarsMapForCanvas[myPlayer.user.id_key];
      }
      if (!flag || !avatar) {
        return;
      }
      const flagX = cell.flag.x;
      const flagY = cell.flag.y;
      ctx.drawImage(
        flag,
        (cell.location.x1 + flagX - 53) * SIZE_X_QUALITY + PADDING_LEFT,
        (cell.location.y1 + flagY - 60) * SIZE_X_QUALITY + PADDING_TOP,
        64 * SIZE_X_QUALITY,
        64 * SIZE_X_QUALITY
      );
      ctx.drawImage(
        avatar,
        (cell.location.x1 + flagX - 22.5) * SIZE_X_QUALITY + PADDING_LEFT,
        (cell.location.y1 + flagY - 35) * SIZE_X_QUALITY + PADDING_TOP,
        15 * SIZE_X_QUALITY,
        15 * SIZE_X_QUALITY
      );
    });
};

export const drawAllNewCells = ({ allCells, ctx, SIZE_X_QUALITY, PADDING_LEFT, PADDING_TOP, language }) => {
  allCells
    .filter(cell => cell.id)
    .forEach(cell => {
      ctx.drawImage(
        window.cachedImages[language].svgImagesForCanvas[cell.id],
        cell.location.x1 * SIZE_X_QUALITY + PADDING_LEFT,
        cell.location.y1 * SIZE_X_QUALITY + PADDING_TOP,
        cell.location.size * SIZE_X_QUALITY,
        cell.location.size * SIZE_X_QUALITY
      );
    });
};

let currentPromise;
let isResolved = false;
export const buildPlayerAvatars = ({ avatars, language }) => {
  if (!avatars) {
    return Promise.resolve();
  }
  if (currentPromise && !isResolved) {
    return currentPromise;
  }
  // if currentPromise and all avatars are same;
  if (
    currentPromise &&
    isResolved &&
    avatars.every(({ id_key }) => window.cachedImages[language].avatarsMapForCanvas[id_key])
  ) {
    return currentPromise;
  }
  isResolved = false;
  currentPromise = Promise.all(avatars.map(({ iconBase64 }) => getImageByUrl(iconBase64))).then(data => {
    isResolved = true;
    data.forEach((image, index) => {
      window.cachedImages[language].avatarsMapForCanvas[avatars[index].id_key] = image;
    });
  });
  return currentPromise;
};
