import { Graphics, Container, Text } from 'pixi.js'
import type { ContainerOptions, Dimension, TileDto } from './interfaces'
import { DEFAULT_CONTAINER_OPTIONS } from './constants'
import useClipboard from 'vue-clipboard3'

export function getColorBackground(container: Container, colorName: string, alpha: number = 0.5) {
  const graphics = new Graphics()
  const color = 0xffffff
  graphics.rect(0, 0, container.width, container.height)
  graphics.fill(color)
  graphics.alpha = alpha
  graphics.x = 0
  graphics.y = 0
  return graphics
}

export function createContainer(options: ContainerOptions) {
  const opts = { ...DEFAULT_CONTAINER_OPTIONS, ...options }
  const container = new Container()
  container.x = opts.x
  container.y = opts.y
  if (opts.parent) {
    opts.parent.addChild(container)
  }

  const rect = new Graphics().rect(0, 0, opts.width, opts.height)

  if (opts.color) {
    rect.fill(opts.color)
  }
  if (opts.alpha) {
    rect.alpha = opts.alpha
  }

  rect.visible = opts.visible
  container.addChild(rect)
  return container
}

export function createButton(options: {
  text: string
  dimension: Dimension
  action: Function
  parent?: Container
}): Container {
  const { text: textStr, dimension, action, parent } = options
  const { x = 0, y = 0, width = 0, height = 25 } = dimension
  const rectangle = new Graphics().roundRect(x, y, width + 4, height + 4, 5).fill(0xffff00)
  const text = new Text({
    text: textStr,
    style: {
      fontFamily: 'Arial',
      fontSize: 12,
      fontWeight: 'bold',
      fill: 0x121212,
      align: 'center',
    },
  })
  text.anchor = 0.5
  const container = new Container()
  container.addChild(rectangle)
  container.addChild(text)

  text.y = y + height / 2
  text.x = x + width / 2

  container.eventMode = 'static'
  container.cursor = 'pointer'
  rectangle.alpha = 0.7
  text.alpha = 0.7
  container.on('pointerdown', () => action())
  container.on('pointerover', () => {
    rectangle.alpha = 1
    text.alpha = 1
  })

  container.on('pointerout', () => {
    rectangle.alpha = 0.7
    text.alpha = 0.7
  })

  if (parent !== undefined) {
    parent.addChild(container)
  }

  return container
}

export function createCrosshair(container: Container, color: number = 0xff0000, d: Dimension) {
  const { x = 0, y = 0, width = 0, height = 0 } = d
  const verticalLine = new Graphics().moveTo(x, 0).lineTo(x, height).stroke(color)
  const horizontalLine = new Graphics().moveTo(0, y).lineTo(width, y).stroke(color)
  verticalLine.alpha = 0.2
  horizontalLine.alpha = 0.2
  container.addChild(verticalLine)
  container.addChild(horizontalLine)
}

export async function wait(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

export function isTilePair(tile: TileDto): boolean {
  return !!(tile.pips && tile.pips[0] === tile.pips[1])
}

export function isTileVertical(tile: TileDto): boolean {
  return tile.orientation === 'north' || tile.orientation === 'south'
}

export function copyToclipboard(value: string) {
  const { toClipboard } = useClipboard()
  toClipboard(value)
}

export function transposeMatrix(matrix: any[][]): any[][] {
  // Get the number of rows and columns
  const numRows = matrix.length
  const numCols = matrix[0].length

  // Create a new matrix with transposed dimensions
  const transposed = Array.from({ length: numCols }, () => Array(numRows).fill(null))

  // Transpose the matrix
  for (let row = 0; row < numRows; row++) {
    for (let col = 0; col < numCols; col++) {
      transposed[col][row] = matrix[row][col]
    }
  }

  return transposed
}

export function createStringMatrix(
  rows: number,
  cols: number,
  initialValue: string = '',
): string[][] {
  // Create an array of arrays (matrix)
  const matrix: string[][] = Array.from({ length: rows }, () =>
    Array.from({ length: cols }, () => initialValue),
  )

  return matrix
}
