import {
  Container,
  Text,
  TextStyle,
  type TextStyleAlign,
  type TextStyleFontStyle,
  type TextStyleFontWeight,
  type TextStyleOptions,
} from 'pixi.js'

export const dropShadowStyle = {
  alpha: 0.5,
  angle: 0.3,
  blur: 5,
  distance: 4,
}

export const mainText = new TextStyle({
  dropShadow: dropShadowStyle,
  fill: '#aaaaaa',
  fontFamily: 'Arial, Helvetica, sans-serif',
  fontWeight: 'bold',
  letterSpacing: 1,
  stroke: '#565656',
})

export const playerNameText = new TextStyle({
  dropShadow: dropShadowStyle,
  fill: '#a2a2a2',
  fontFamily: 'Arial, Helvetica, sans-serif',
  letterSpacing: 1,
  stroke: '#565656',
  fontSize: 15,
  fontWeight: 'bold',
})

export const summaryTitle = new TextStyle({
  dropShadow: dropShadowStyle,
  fill: '#a2a2a2',
  fontFamily: 'Arial, Helvetica, sans-serif',
  letterSpacing: 1,
  stroke: '#565656',
  fontSize: 15,
  fontWeight: 'bold',
})

export const scoreText = new TextStyle({
  dropShadow: dropShadowStyle,
  fill: '#aaaaaa',
  fontFamily: 'Arial, Helvetica, sans-serif',
  letterSpacing: 1,
  stroke: '#565656',
  fontSize: 32,
  fontWeight: 'bold',
})

function getStyle(styleOptions: TextStyleOptions = {}) {
  const {
    fill = 0xa2a2a2,
    fontSize = 15,
    fontFamily = 'Arial, Helvetica, sans-serif',
    fontWeight = 'normal',
    fontStyle = 'normal',
    dropShadow,
    letterSpacing = 1,
    stroke,
  } = styleOptions
  const style = new TextStyle({
    fill,
    fontFamily,
    letterSpacing,
    stroke: stroke ? stroke : undefined,
    fontSize,
    fontStyle,
    fontWeight: fontWeight as any,
    dropShadow: dropShadow ? dropShadowStyle : undefined,
  })
  return style
}

const styleFactory = (fill: number) => {
  return (
    fontSize: number = 15,
    fontWeight: TextStyleFontWeight = 'normal',
    dropShadow: boolean = false,
  ) =>
    getStyle({
      fill,
      fontSize,
      fontWeight,
      dropShadow,
    })
}

export const whiteStyle = (
  fontSize: number = 15,
  fontWeight: TextStyleFontWeight = 'normal',
  dropShadow: boolean = true,
) =>
  getStyle({
    fontSize,
    fontWeight,
    dropShadow,
  })

export const timerStyle = () =>
  getStyle({
    fill: 0xffff66,
    fontSize: 36,
    // fontWeight: 'bold',
    stroke: { color: '#000000', width: 6, join: 'round' },
  })

export const yellowStyle = (
  fontSize: number = 15,
  fontWeight: TextStyleFontWeight = 'normal',
  dropShadow: boolean = true,
) =>
  getStyle({
    fill: 0xffff00,
    fontSize,
    fontWeight,
    dropShadow,
  })

export const grayStyle = styleFactory(0x444444)

interface TextOptions {
  text: string
  x: number
  y: number
  style?: TextStyle
  container?: Container
  align?: 'left' | 'center' | 'right'
  fontStyle?: TextStyleFontStyle
}

export function createText(textOptions: TextOptions) {
  const defaultOptions = { style: whiteStyle(), align: 'center' }
  const { text: str, x, y, style, container, align } = { ...defaultOptions, ...textOptions }
  const text = new Text({ text: str, style })

  switch (align) {
    case 'center':
      text.anchor.set(0.5, 0.5)
      break
    case 'left':
      text.anchor.set(0, 0.5)
      break
    case 'right':
      text.anchor.set(1, 0.5)
      break
  }

  if (container) container.addChild(text)
  text.x = x
  text.y = y
  return text
}
