import { getTOTPByLink } from "./utils/queryParser.js";

let _props = null;

AppSettingsPage({
    build(props) {
        _props = props;

        const storage = JSON.parse(
            props.settingsStorage.getItem("TOTPs") ?? "[]"
        );
        const totpEntrys = GetTOTPList(storage);
        const createButton = TextInput({
            placeholder: "otpauth://",
            label: "Add new OTP Link",
            onChange: (changes) => {
                var link = getTOTPByLink(changes);
                if (link == null) {
                    console.log("link is invalid");
                    return;
                }
                storage.push(link);
                updateStorage(storage);
            },
            labelStyle: {
                backgroundColor: "#14213D",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                margin: "10px",
                flexGrow: 1,
                fontSize: "20px",
                color: "#FFFFFF",
                borderRadius: "5px",
            },
        });

        var body = Section(
            {
                style: {
                    backgroundColor: "black",
                    minHeight: "100vh",
                },
            },
            [
                View(
                    {
                        style: {
                            textAlign: "center",
                        },
                    },
                    Text(
                        {
                            align: "center",
                            paragraph: true,
                            style: {
                                marginBottom: "10px",
                                color: "#fff",
                                fontSize: 23,
                                verticalAlign: "middle",
                            },
                        },
                        "TOTPS:"
                    )
                ),
                ...totpEntrys,
                createButton,
            ]
        );
        return body;
    },
});

function GetTOTPList(storage) {
    let totpEntrys = [];
    let counter = 0;
    storage.forEach((element) => {
        const elementId = counter;
        const textInput = TextInput({
            placeholder: "otpauth://",
            label: "Change OTP link",
            onChange: (changes) => {
                try {
                    storage[elementId] = getTOTPByLink(changes);
                    updateStorage(storage);
                } catch (err) {
                    console.log(err);
                }
            },
            labelStyle: {
                backgroundColor: "#14213D",
                textAlign: "center",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                margin: "10px",
                flexGrow: 1,
                fontSize: "20px",
                color: "#E5E5E5",
                borderRadius: "5px",
            },
        });
        const textBig = Text(
            {
                align: "center",
                style: {
                    color: "#ffffff",
                    fontSize: "16px",
                },
                paragraph: true,
            },
            `${element.issuer}: ${element.client}`
        );
        const delButton = Button({
            onClick: () => {
                storage = storage.filter(
                    (x) => storage.indexOf(x) != elementId
                );
                updateStorage(storage);
            },
            style: {
                backgroundColor: "#ba181b",
                fontSize: "18px",
                color: "#ffffff",
                height: "fit-content",
                margin: "10px",
            },
            label: "DEL",
        });
        const text = Text(
            {
                style: {
                    color: "#ffffff",
                    fontSize: "14px",
                },
                align: "center",
            },
            `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds`
        );
        const view = View(
            {
                style: {
                    textAlign: "center",
                    border: "2px solid white",
                    borderRadius: "5px",
                    margin: "10px",
                },
            },
            [
                textBig,
                text,
                View(
                    {
                        style: {
                            display: "grid",
                            gridTemplateColumns: "1fr 100px",
                        },
                    },
                    [textInput, delButton]
                ),
            ]
        );
        totpEntrys.push({ text: text, view: view });
        counter++;
    });

    return totpEntrys.map((x) => x.view);
}

function updateStorage(storage) {
    _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
}