import pretty from 'pretty';
import { createQRCode } from '../create-qrcode';
import { getSymbols } from './symbols';

const symbols = getSymbols();
const qrCodeOptions = { showLogo: false, width: 100, padding: 0, radius: 0 };

export interface QuestLayoutOptions {
    width?: number;
    assetUrl: string;
    serviceRequestUrl: string;
    manufacturer: string;
    model: string;
    serialNumber: string;
    coastId: string;
    yearAcquired?: string | number;
}

export function createQuestLayout({
    width,
    assetUrl,
    serviceRequestUrl,
    manufacturer,
    model,
    serialNumber,
    coastId,
    yearAcquired,
}: QuestLayoutOptions): string {
    const assetQRCode = createQRCode({ url: assetUrl, ...qrCodeOptions });
    const serviceRequestQRCode = createQRCode({ url: serviceRequestUrl, ...qrCodeOptions });

    return pretty(`
        <svg width="${width}" viewBox="0 0 375 200" xmlns="http://www.w3.org/2000/svg" fill="black">
            <defs>${symbols}</defs>
            <rect x="0" y="0" width="375" height="200" fill="white" rx="8" />
            <g transform="translate(187.5, 13) scale(1.05)">
                <g transform="translate(-50, 0)"><use href="#quest-logo" /></g>
            </g>
            ${getYearAcquiredText(yearAcquired?.toString())}
            <g transform="translate(0, 60)" id="center-row">
                <g transform="translate(20, 0)">${assetQRCode}</g>
                <g transform="translate(255, 0)">${serviceRequestQRCode}</g>
                <g transform="translate(187.5, 1)">
                    <g transform="translate(0, 0)">
                        <g transform="translate(-30, 0)"><use href="#manufacturer-header" /></g>
                        ${getSvgText(manufacturer)}
                    </g>
                    <g transform="translate(0, 27)">
                        <g transform="translate(-12.5, 0)"><use href="#model-header" /></g>
                        ${getSvgText(model)}
                    </g>
                    <g transform="translate(0, 54)">
                        <g transform="translate(-30, 0)"><use href="#serial-number-header" /></g>
                        ${getSvgText(serialNumber)}
                    </g>
                    <g transform="translate(0, 81)">
                        <g transform="translate(-17.5, 0)"><use href="#coast-id-header" /></g>
                        ${getSvgText(coastId)}
                    </g>
                </g>
            </g>
            <g transform="translate(0, 156)" id="qrcode-labels">
                <g transform="translate(30, 20)">
                    <use href="#asset-details-header" />
                </g>
                <g transform="translate(259, 20)">
                    <use href="#service-request-header" />
                </g>
            </g>
            <g transform="translate(187.5, 164.5)">
                <g transform="translate(-36.5, 0)"><use href="#coast-logo" /></g>
            </g>
      </svg>
  `);
}

// this controls letter spacing for the monospace text elements
const glyphWidth = 5.5;

type SvgTextJustify = 'left' | 'center' | 'right';

function getSvgText(text?: string, justify: SvgTextJustify = 'center'): string {
    if (!text) {
        return '';
    }
    const characters = text.trim().replace(/  +/g, ' ').slice(0, 20).toUpperCase().split('');
    const symbols = characters.map(getSymbolForChar).join('');
    // offset by half the text width to center the text
    const offset = getOffset(characters, justify);
    return `<g transform="translate(-${offset}, 8)">${symbols}</g>`;
}

function getOffset(characters: string[], justify: SvgTextJustify): number {
    switch (justify) {
        case 'left':
            return 0;
        case 'right':
            return characters.length * glyphWidth;
        case 'center':
            return (characters.length * glyphWidth) / 2;
    }
}

function getSymbolForChar(char: string, index: number): string {
    if (char === ' ') {
        return '';
    } else {
        return `<use href="#character-${getEncodedChar(char)}" x="${index * glyphWidth}" y="0" />`;
    }
}

function getEncodedChar(char: string): string {
    // something about the '%2C' encoding causes commas not the show up in the
    // PDF, even though they show up in the SVG
    if (char === ',') {
        return 'comma';
    } else if (char === '/') {
        return 'slash';
    } else {
        return encodeURIComponent(char);
    }
}

function getYearAcquiredText(year?: string): string {
    if (!year) {
        return '';
    }
    return `
        <g transform="translate(362, 12)">
            <g transform="translate(-38.5, 0)"><use href="#acquired-header" /></g>
            ${getSvgText(year, 'right')}
        </g>
    `;
}