import { Host, h } from "@stencil/core";
import Prando from "../../lib/prando.js";
import { COLORS } from "../../utils/prand.js";
const SingleArc = (rotation) => (h("svg", { class: {
        rotate90: rotation === 1,
        rotate180: rotation === 2,
        rotate270: rotation === 3,
    }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_66)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" })), h("defs", null, h("clipPath", { id: "clip0_674_66" }, h("rect", { width: "12", height: "12" })))));
const DoubleArc = (rotation) => (h("svg", { class: {
        rotate90: rotation === 1,
        rotate180: rotation === 2,
        rotate270: rotation === 3,
    }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_255)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" })), h("defs", null, h("clipPath", { id: "clip0_674_255" }, h("rect", { width: "12", height: "12" })))));
const BASE_PATTERNS = [
    [
        [0, 0, 0, 0],
        [0, 1, 3, 2],
    ],
    [
        [1, 1, 0, 0],
        [0, 1, 3, 2],
    ],
    [
        [0, 1, 0, 1],
        [0, 1, 3, 2],
    ],
    [
        [0, 0, 1, 1],
        [0, 1, 3, 2],
    ],
    [
        [1, 0, 1, 0],
        [0, 1, 3, 2],
    ],
    [
        [1, 1, 1, 1],
        [0, 1, 3, 2],
    ],
    [
        [0, 0, 0, 0],
        [2, 3, 1, 0],
    ],
    [
        [1, 1, 1, 1],
        [2, 3, 1, 0],
    ],
    [
        [1, 1, 1, 1],
        [0, 1, 2, 3],
    ],
];
export class CpslIdenticon {
    constructor() {
        this.hash = undefined;
        this.size = '40px';
        this.variant = 'default';
        this.arcWidth = '30%';
    }
    render() {
        let props;
        const isEmpty = !this.hash;
        if (!isEmpty)
            props = getIdenticonProps(this.hash);
        return (h(Host, { key: 'a3c8935e47ee631e95f63d02f32e022832229cb1', class: {
                red: (props === null || props === void 0 ? void 0 : props.color) === 'red',
                orange: (props === null || props === void 0 ? void 0 : props.color) === 'orange',
                yellow: (props === null || props === void 0 ? void 0 : props.color) === 'yellow',
                green: (props === null || props === void 0 ? void 0 : props.color) === 'green',
                blue: (props === null || props === void 0 ? void 0 : props.color) === 'blue',
                purple: (props === null || props === void 0 ? void 0 : props.color) === 'purple',
                empty: !(props === null || props === void 0 ? void 0 : props.color) && !this.hash,
                avatar: this.variant === 'avatar',
            }, style: {
                width: this.size,
                height: this.size,
                ['--identicon-arc-width']: this.arcWidth,
            } }, (props === null || props === void 0 ? void 0 : props.shapes) &&
            (props === null || props === void 0 ? void 0 : props.rotations) &&
            props.shapes.map((isDouble, index) => {
                return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);
            })));
    }
    static get is() { return "cpsl-identicon"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-identicon.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-identicon.css"]
        };
    }
    static get properties() {
        return {
            "hash": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "hash",
                "reflect": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The CSS width and height of the identicon.\nDefault is: 40px."
                },
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'40px'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'avatar'",
                    "resolved": "\"avatar\" | \"default\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "arcWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "arc-width",
                "reflect": false,
                "defaultValue": "'30%'"
            }
        };
    }
}
const PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];
function getIdenticonProps(seed) {
    const rng = new Prando(seed);
    const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));
    const deviationIndex = Math.floor(iDeviation / 4);
    const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];
    return {
        color: COLORS[iColor],
        shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {
            return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;
        }),
        rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),
    };
}
//# sourceMappingURL=cpsl-identicon.js.map
