import fs from "fs"
import { formatHex, parseHex, convertRgbToOklab } from 'culori'

function make_piece_colors(base) {
	let rgb = parseHex(base)
        let sh1 = convertRgbToOklab(rgb); sh1.l *= 0.9;
        let sh2 = convertRgbToOklab(rgb); sh2.l *= 0.8;
        let sh3 = convertRgbToOklab(rgb); sh3.l *= 0.7;
        let sh4 = convertRgbToOklab(rgb); sh4.l *= 0.4;
	return [ base, formatHex(sh1), formatHex(sh2), formatHex(sh3), formatHex(sh4) ]
}

const color_austria = make_piece_colors("#ffffff")
const color_bavaria = make_piece_colors("#ffc825")
const color_france = make_piece_colors("#ed1c24")
const color_pragmatic = make_piece_colors("#5f5c5c")
const color_prussia = make_piece_colors("#005988")
const color_saxony = make_piece_colors("#157d36")

function print_cylinder(output, icon_file, c) {
	let icon = fs.readFileSync(icon_file).toString('base64')
	let svg = []
	svg.push('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="48">')
	svg.push('<clipPath id="c"><ellipse cx="22" cy="15" rx="20.5" ry="13.5"/></clipPath>')

	svg.push(`<linearGradient id="g">`)
	svg.push(`<stop offset="0%" stop-color="${c[1]}"/>`)
	svg.push(`<stop offset="50%" stop-color="${c[2]}"/>`)
	svg.push(`<stop offset="100%" stop-color="${c[3]}"/>`)
	svg.push('</linearGradient>')

	svg.push(`<path fill="url(#g)" stroke="black" d="M1.5 15v18A20.5 13.5 0 0 0 22 46.5 20.5 13.5 0 0 0 42.5 33V15h-41z"/>`)
	svg.push(`<image preserveAspectRatio="none" href="data:image/png;base64,${icon}" clip-path="url(#c)" x="1" y="1" width="42" height="28"/>`)
	svg.push(`<ellipse fill="none" stroke="black" cx="22" cy="15" rx="20.5" ry="13.5"/>`)

	svg.push('</svg>')
	fs.writeFileSync(output, svg.join("\n") + "\n")
}

function print_disc(output, icon_file, c) {
	let icon = fs.readFileSync(icon_file).toString('base64')
	let svg = []
	svg.push('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="38">')
	svg.push('<clipPath id="c"><ellipse cx="22" cy="15" rx="20.5" ry="13.5"/></clipPath>')

	svg.push(`<linearGradient id="g">`)
	svg.push(`<stop offset="0%" stop-color="${c[1]}"/>`)
	svg.push(`<stop offset="50%" stop-color="${c[2]}"/>`)
	svg.push(`<stop offset="100%" stop-color="${c[3]}"/>`)
	svg.push('</linearGradient>')

	svg.push(`<path fill="url(#g)" stroke="black" d="M1.5 15 v 8 a 20.5 13.5 0 0 0 20.5 13.5 20.5 13.5 0 0 0 20.5 -13.5 v -8"/>`)
	svg.push(`<image preserveAspectRatio="none" href="data:image/png;base64,${icon}" clip-path="url(#c)" x="1" y="1" width="42" height="28"/>`)
	svg.push(`<ellipse fill="none" stroke="black" cx="22" cy="15" rx="20.5" ry="13.5"/>`)

	svg.push('</svg>')
	fs.writeFileSync(output, svg.join("\n") + "\n")
}

function print_cube(output, c) {
	let svg = []

	let xo = 0
	let yo = 0
	let ys = 2/3

	let w = 20
	let d = Math.sqrt(w * w + w * w)
	let h = Math.round(w * 0.8)

	let v = [
		[ xo + (d/2), yo + (0) * ys ],
		[ xo + (d), yo + (d/2) * ys ],
		[ xo + (d/2), yo + (d) * ys ],
		[ xo + (0), yo + (d/2) * ys ],
	]

	for (let xy of v) {
		xy[0] = Math.round(xy[0]) + 0.5
		xy[1] = Math.round(xy[1]) + 0.5
	}

	let v2 = [
		[ v[1][0], v[1][1] ],
		[ v[1][0], v[1][1] + h ],
		[ v[2][0], v[2][1] + h ],
		[ v[3][0], v[3][1] + h ],
		[ v[3][0], v[3][1] ],
	]

	let v3 = [
		[ v[2][0], v[2][1] ],
		[ v[2][0], v[2][1] + h ],
	]

	let f1 = [
		[ v[1][0], v[1][1] ],
		[ v[1][0], v[1][1] + h ],
		[ v[2][0], v[2][1] + h ],
		[ v[2][0], v[2][1] ],
	]

	let f2 = [
		[ v[2][0], v[2][1] ],
		[ v[2][0], v[2][1] + h ],
		[ v[3][0], v[3][1] + h ],
		[ v[3][0], v[3][1] ],
	]

	svg.push('<svg xmlns="http://www.w3.org/2000/svg" width="29" height="36">')

	svg.push(`<path fill="${c[0]}" d="M${v}"/>`)
	svg.push(`<path fill="${c[3]}" d="M${f1}"/>`)
	svg.push(`<path fill="${c[1]}" d="M${f2}"/>`)

	svg.push(`<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="${c[4]}" d="M${v}z M${v2} M${v3}"/>`)

	svg.push('</svg>')
	fs.writeFileSync(output, svg.join("\n") + "\n")
}

print_cylinder("pieces/cylinder_austria_1.svg", "tools/cylinders/face_austria_1.png", color_austria)
print_cylinder("pieces/cylinder_austria_2.svg", "tools/cylinders/face_austria_2.png", color_austria)
print_cylinder("pieces/cylinder_austria_3.svg", "tools/cylinders/face_austria_3.png", color_austria)
print_cylinder("pieces/cylinder_austria_4.svg", "tools/cylinders/face_austria_4.png", color_austria)
print_cylinder("pieces/cylinder_austria_5.svg", "tools/cylinders/face_austria_5.png", color_austria)
print_cylinder("pieces/cylinder_austria_6.svg", "tools/cylinders/face_austria_6.png", color_austria)

print_cylinder("pieces/cylinder_bavaria_1.svg", "tools/cylinders/face_bavaria_1.png", color_bavaria)

print_cylinder("pieces/cylinder_france_1.svg", "tools/cylinders/face_france_1.png", color_france)
print_cylinder("pieces/cylinder_france_2.svg", "tools/cylinders/face_france_2.png", color_france)
print_cylinder("pieces/cylinder_france_3.svg", "tools/cylinders/face_france_3.png", color_france)
print_cylinder("pieces/cylinder_france_4.svg", "tools/cylinders/face_france_4.png", color_france)
print_cylinder("pieces/cylinder_france_5.svg", "tools/cylinders/face_france_5.png", color_france)

print_cylinder("pieces/cylinder_pragmatic_1.svg", "tools/cylinders/face_pragmatic_1.png", color_pragmatic)
print_cylinder("pieces/cylinder_pragmatic_2.svg", "tools/cylinders/face_pragmatic_2.png", color_pragmatic)
print_cylinder("pieces/cylinder_pragmatic_3.svg", "tools/cylinders/face_pragmatic_3.png", color_pragmatic)

print_cylinder("pieces/cylinder_prussia_1.svg", "tools/cylinders/face_prussia_1.png", color_prussia)
print_cylinder("pieces/cylinder_prussia_2.svg", "tools/cylinders/face_prussia_2.png", color_prussia)
print_cylinder("pieces/cylinder_prussia_3.svg", "tools/cylinders/face_prussia_3.png", color_prussia)
print_cylinder("pieces/cylinder_prussia_4.svg", "tools/cylinders/face_prussia_4.png", color_prussia)

print_cylinder("pieces/cylinder_saxony_1.svg", "tools/cylinders/face_saxony_1.png", color_saxony)

print_disc("pieces/disc_hussar.svg", "tools/cylinders/face_hussar.png", color_austria)

print_cube("pieces/cube_austria.svg", color_austria)
print_cube("pieces/cube_bavaria.svg", color_bavaria)
print_cube("pieces/cube_france.svg", color_france)
print_cube("pieces/cube_pragmatic.svg", color_pragmatic)
print_cube("pieces/cube_prussia.svg", color_prussia)
print_cube("pieces/cube_saxony.svg", color_saxony)

let css = [ "/* TOKEN BORDER COLORS */" ]

function border(base, sel) {
	let rgb = parseHex(base)
	// let hic = convertRgbToOklab(rgb); hic.l = Math.min(1,hic.l+0.1)
	// let loc = convertRgbToOklab(rgb); loc.l = Math.max(0,loc.l-0.1)
	// let shc = convertRgbToOklab(rgb); shc.l = Math.max(0,shc.l-0.4)
	let hic = convertRgbToOklab(rgb); hic.l = Math.min(1,hic.l*1.2)
	let loc = convertRgbToOklab(rgb); loc.l = Math.max(0,loc.l*0.8)
	let shc = convertRgbToOklab(rgb); shc.l = Math.max(0,shc.l*0.4)
	let sh = formatHex(shc)
	let hi = formatHex(hic)
	let lo = formatHex(loc)
	css.push(`${sel} { background-color: ${base}; border-color: ${hi} ${lo} ${lo} ${hi}; box-shadow: 0 0 0 1px ${sh}, 0px 1px 4px #0008; }`)
}

border("#006cb7", "#token_total_support")
border("#80643e", "#token_prop_card")
border("#d74729", "#token_oppose_plus_bases")
border("#004e81", "#token_el_presidente")
border("#6a8796", "#token_aid")
border("#01904b", ".token.shipment")
border("#4b87c0", ".token.passive_support")
border("#b75f61", ".token.passive_opposition")
border("#0054a6", ".token.active_support")
border("#991a1e", ".token.active_opposition")
border("#0054a6", ".token.govt_control")
border("#991a1e", ".token.farc_control")
border("#ffc509", ".token.farc_zone")
//border("#22010e", ".token.terror")
border("#535052", ".token.terror")
border("#535052", ".token.sabotage")
border("#9dadb3", ".token.unshaded")
border("#465c80", ".token.shaded")
border("#6d5735", ".token.reminder.sucumbios")
border("#cf1f30", ".token.reminder.senado_farc")
border("#6d9f3b", ".token.reminder.senado_cartels")
border("#ffcf00", ".token.reminder.senado_auc")
border("#8dc73f", ".token.reminder.darien")

console.log(css.join("\n"))