const alphabet = 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхц' +
    'чшщъыьэюяABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz' +
    '0123456789()!?.,:;" '

export default class ImgFont {

    constructor(img, letterWidth, lineHeight) {
        this.img = img
        this.letterWidth = letterWidth
        this.lineHeight = lineHeight
    }

    draw(ctx, text, x, y) {
        const letters = text.split('')

        const img = this.img
        const cy = y + this.lineHeight
        const sy = 2 // ?
        const w = this.letterWidth
        const h = this.lineHeight

        letters.forEach((letter, i) => {
            const cx = x + i * this.letterWidth
            const sx = alphabet.indexOf(letter) * this.letterWidth
            ctx.drawImage(img, sx, sy, w, h, cx, cy, w, h)
        })
    }

    drawPage(ctx, text, x, y, page = 0, pageSize = 308, lineWidth = 22) {
        const letters = text.split('')
            .slice(page * pageSize, (page + 1) * pageSize)

        const img = this.img
        const sy = 2 // ?
        const w = this.letterWidth
        const h = this.lineHeight

        letters.forEach((letter, i) => {
            const cx = x + i * this.letterWidth % lineWidth
            const cy = (~~(i / lineWidth) + 1) * this.lineHeight + y
            const sx = alphabet.indexOf(letter) * this.letterWidth
            ctx.drawImage(img, sx, sy, w, h, cx, cy, w, h)
        })
    }
}

/*
const letterWidth = 7
const lineHeight = 9
const color = '#a4d695'

const letters = 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюяABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789()!?.,:;"'.split('')

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

canvas.width = letterWidth * letters.length
canvas.height = lineHeight
  
setTimeout(() => {
  ctx.font = '9px monaco'
  ctx.fillStyle = color
 
	letters.forEach((letter, i) => {
  	const x = i * letterWidth
     ctx.fillText(letter, x, lineHeight)
  })
}, 500)
*/
