import test from 'ava'
import LayoutEngine from '../lib/simple-masonry'

function extractDimensions (rectangle) {
  return {
    width: rectangle.width,
    height: rectangle.height
  }
}

test('layout order should be maintained when dimensions are the same', (t) => {

  const dimensions = []

  for (let i = 0; i < 20; i++) {
    dimensions.push({ width: 500, height: 500, order: i })
  }

  const rectangles = LayoutEngine.generateRectangles({
    dimensions: dimensions, 
    columns: 5, 
    width: 2500, 
    gutter: 0
  })

  const expectedPattern = []
  for (let i = 0; i < 20; i++) {
    expectedPattern.push({
      x: ((i * 500) % 2500),
      y: ((Math.floor(i / 5)) * 500)
    })
  }

  const returnedPattern = rectangles.map(rectangle => ({ x: rectangle.x, y: rectangle.y }))

  t.deepEqual(returnedPattern, expectedPattern)
})

test('x and y gutter should be separately configurable', (t) => {

  const dimensions = []

  const gutterX = 50
  const gutterY = 30

  dimensions.push({ width: 800 , height: 800 })
  dimensions.push({ width: 800 , height: 800 })
  dimensions.push({ width: 800 , height: 800 })
  dimensions.push({ width: 800 , height: 800 })

  const rectangles = LayoutEngine.generateRectangles({
    dimensions: dimensions, 
    columns: 2, 
    width: 800,
    gutterX: gutterX, 
    gutterY: gutterY
  })

  const expectedPattern = [{
    x: 0,
    y: 0
  }, {
    x: 425,
    y: 0
  }, {
    x: 0,
    y: 405
  }, {
    x: 425,
    y: 405
  }]

  const returnedPattern = rectangles.map(rectangle => ({ x: rectangle.x, y: rectangle.y }))

  t.deepEqual(returnedPattern, expectedPattern)
})

test('max height should be configurable', (t) => {

  const dimensions = []

  const maxHeight = 800
  const width = 8000

  for (let i = 0; i < 20; i++) {
    dimensions.push({ width: 2500, height: 2500 })
  }

  const rectangles = LayoutEngine.generateRectangles({
    dimensions,
    maxHeight,
    width
  })

  t.true(rectangles.every(r => r.height <= maxHeight))

})

test('collapsing should be optional', (t) => {

  const dimensions = []

  const collapsing = true

  for (let i = 0; i < 20; i++) {
    dimensions.push({ width: (Math.random() * 100 + 100), height: (Math.random() * 100 + 100) })
  }

  const rectangles1 = LayoutEngine.generateRectangles({
    dimensions,
    collapsing: true
  })

  const rectangles2 = LayoutEngine.generateRectangles({
    dimensions,
    collapsing: false
  })

  t.notDeepEqual(rectangles1, rectangles2)

})

test('layout order should be maintained when collapsing is turned off', (t) => {

  const dimensions = []
  const columns = 5
  const width = 1000
  const collapsing = true
  const gutter = 0

  for (let i = 1; i < 20; i++) {
    dimensions.push({ width: i * 50 + 100, height: (i * 50 + 100) + i % 3 * 50})
  }

  // we expect to get back the scaled dimensions in the same order as they were entered
  const expectedPattern = dimensions
    .map(LayoutEngine.__scaleRectangles(columns, width, gutter, 0))
    .map(extractDimensions)

  const returnedPattern = LayoutEngine.generateRectangles({
    dimensions,
    collapsing,
    gutter,
    width,
    columns
  })

  // sort the returned values by x, y coordinates (left to right, top to bottom)
  // if the order IS maintained, before and after sorting should remain the same (if collapsing is disabled)
  // if the order IS NOT maintained, before and after sorting could differ
  const controlPattern = returnedPattern
    .sort((rectangle1, rectangle2) => {
      if (rectangle1.y < rectangle2.y) {
        return -1
      }

      if (rectangle1.y > rectangle2.y) {
        return 1
      }

      if (rectangle1.x < rectangle2.x) {
        return -1
      }

      if (rectangle1.x > rectangle2.x) {
        return 1
      }

      return 0
    })
    .map(extractDimensions)

  // If order is maintained, these two values should be identical
  t.deepEqual(expectedPattern, controlPattern)

})
@@ -3918,12 +3918,680 @@
 Pattern)%0A%0A%7D)
+%0A%0Atest('the centering option should center the colums when there are less blocks than number of columns', (t) =%3E %7B%0A%0A  let dimensions = %5B%5D%0A  const columns = 3%0A  const width = 600%0A  const gutter = 0%0A  const centering = true%0A%0A  const expectedPattern = %5B%7B%0A    x: 100,%0A    y: 0,%0A    width: 200,%0A    height: 200%0A  %7D, %7B%0A    x: 300,%0A    y: 0,%0A    width: 200,%0A    height: 200%0A  %7D%5D%0A%0A  dimensions = expectedPattern.map(extractDimensions)%0A%0A  const returnedPattern = LayoutEngine.generateRectangles(%7B%0A    dimensions,%0A    gutter,%0A    width,%0A    columns,%0A    centering%0A  %7D)%0A%0A  console.log(JSON.stringify(returnedPattern, null, 2))%0A%0A  t.deepEqual(expectedPattern, returnedPattern)%0A%0A%7D)

add unit test