export const setTestLineCss = (testLine: boolean) => {
  const style = document.createElement('style');
  style.type = 'text/css';
  if (testLine) {
    style.innerHTML = `.testInfo { display: flex !important; }`;
  } else {
    style.innerHTML = `.testInfo { display: none !important; }`;
  }
  document.getElementsByTagName('head')[0].appendChild(style);
}

export const setInterlineCss = (interline: number) => {
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `.line { margin-bottom: ${interline}px !important; }`;
  document.getElementsByTagName('head')[0].appendChild(style);
}

export const setResolutionCss = (width: number, height: number, rows: number, interline: number) => {
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `.row, .testInfo { width: ${width}px !important; height: ${height}px !important; } .line { height: ${height}px !important; } canvas { height: ${height}px }`;
  document.getElementsByTagName('head')[0].appendChild(style);
  style = document.createElement('style');
  style.type = 'text/css';
  console.log('rows = ' + rows);
  console.log('height = ' + height);
  console.log('interline = ' + interline);
  console.log(document.body.clientHeight);
  const appHeight = document.body.clientHeight - (rows * height + rows * interline);
  style.innerHTML = `#app {height: ${appHeight}px !important}`;
  document.getElementsByTagName('head')[0].appendChild(style);
}

export const changeDisplayLines = (showLines: number, rows: number, columns: number) => {
  console.log(showLines);
  for (let row = 0; row < rows; row++) {
    if (row >= showLines) {
      document.getElementById('line-' + row).style.display = 'none';
    } else {
      document.getElementById('line-' + row).style.display = 'block';
    }
  }
}

export const fitToScreen = (screenWidth: number, screenHeight: number, rowWidth: number, rowHeight: number, rows: number, columns: number) => {
  console.log('screen width = ' + screenWidth);
  console.log('screen height = ' + screenHeight);
  console.log('row width = ' + rowWidth);
  console.log('row height = ' + rowHeight);

  // oblicz ile zmiesci sie na szerokosc
  let rowsCountAvail = Math.floor(screenWidth/rowWidth);
  if (rowsCountAvail>10) {
    rowsCountAvail = 10;
  }

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < columns; col++) {
      if (col >= rowsCountAvail) {
        document.getElementById('row-' + row + '-' + col).style.display = 'none';
      } else {
        document.getElementById('row-' + row + '-' + col).style.display = 'inline-block';
      }
    }
  }

}

export const clearAllMedias = (rows:number, columns: number, stop?: boolean) => {
  const iframes = document.getElementById(`videoGrid`).querySelectorAll('iframe');
  for (var i = 0; i < iframes.length; i++) {
    iframes[i].parentNode.removeChild(iframes[i]);
  }
  const oldImages = document.getElementById(`videoGrid`).querySelectorAll('img');
  for (var i = 0; i < oldImages.length; i++) {
    oldImages[i].parentNode.removeChild(oldImages[i]);
  }
  
  if (stop) {
    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < columns; col++) {
        window.gridPlayers[row][col].stop();
      }
    }

    setTimeout(() => {
      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < columns; col++) {
          // window.gridPlayers[row][col].stop();
          // wait for clear buffer
          // await sleep(20);
          const context = window.contextsArray[row][col].canvas.getContext('webgl');
          const color = context.clearColor(0,0,0,0);
          // clear canvas
          context.clear(color);
        }
      }
    }, 500)
  } else {
    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < columns; col++) {
        // window.gridPlayers[row][col].stop();
        // wait for clear buffer
        // await sleep(20);
        const context = window.contextsArray[row][col].canvas.getContext('webgl');
        const color = context.clearColor(0,0,0,0);
        // clear canvas
        context.clear(color);
      }
    }
  } 
}