import { computed, defineComponent, ref } from "vue";

export default defineComponent({
    name: "ge-calculator",
    setup() {
        const t3Ratio = ref(1);
        const t4Ratio = ref(4);

        const MPG_T3_SYN = 25;
        const MPG_T4_SYN = 100;

        const inputDefs = [
            {
                name: "Grains",
                mpg: 1,
                unit: "",
                step: 0.1,
            },
            {
                name: 'Natural Dessicated Thyroid ("Armour")',
                mpg: 60,
                unit: "mg",
            },
            {
                name: 'Liothyronine (T3 - "Cytomel/Cynomel")',
                mpg: MPG_T3_SYN,
                unit: "mcg",
            },
            {
                name: "Levothyroxine (T4)",
                mpg: MPG_T4_SYN,
                unit: "mcg",
            },
        ];

        const numGrains = ref(2);

        const compounded = computed(() => {
            const total = t3Ratio.value + t4Ratio.value;
            const t3Proportion = t3Ratio.value / total;
            const t4Proportion = t4Ratio.value / total;
            const grainsSyn = t3Proportion / MPG_T3_SYN + t4Proportion / MPG_T4_SYN;
            const multiplierSyn = numGrains.value / grainsSyn;
            return {
                t3Syn: t3Proportion * multiplierSyn,
                t4Syn: t4Proportion * multiplierSyn,
            };
        });

        return () => (
            <>
                <header>
                    <h1>Thyroid Calculator</h1>
                </header>
                <div class="text-slab">
                    <p>
                        Use this calculator to convert between different forms and units of thyroid hormone. Common
                        synthetic, pure and natural dessicated forms are listed. The last section of the table provides
                        input fields for a specified ratio of T3 to T4, and will give the dosages required for both the
                        synthetic and pure forms. All dosages given are based on the "Grains" field at the beginning of
                        the table, but editing any field will automatically update the rest to keep them in sync.
                    </p>
                </div>
                <div class="text-slab ge-calculator">
                    <table>
                        <tbody>
                            {inputDefs.map((_) => (
                                <tr key={_.name}>
                                    <td>
                                        {_.name}{_.unit && (', ' + _.unit)}
                                    </td>
                                    <td class="right">
                                        <div style="display: inline-block;">
                                            <input
                                                value={_.name === "Grains" ? numGrains.value : _.mpg * numGrains.value}
                                                onInput={(e) => {
                                                    const val = (e.target as HTMLInputElement).valueAsNumber;
                                                    if (_.name === "Grains") {
                                                        numGrains.value = val;
                                                    } else {
                                                        numGrains.value = val / _.mpg;
                                                    }
                                                }}
                                                min="0"
                                                step={_.step ?? 1}
                                                type="number"
                                            />
                                        </div>
                                    </td>
                                </tr>
                            ))}
                            <tr>
                                <td colspan="2">
                                    <strong>Compounded (T3 and T4 - "Cynoplus")</strong>
                                </td>
                            </tr>
                            <tr class="ratios">
                                <td>
                                    Desired Ratio (T3:T4)
                                </td>
                                <td class="right ratio">
                                    <div>
                                        <input
                                            value={t3Ratio.value}
                                            onInput={(e) => {
                                                t3Ratio.value = (e.currentTarget as HTMLInputElement).valueAsNumber;
                                            }}
                                            min="0"
                                            step="1"
                                            type="number"
                                        />
                                    </div> 
                                    <span class="separator"/> 
                                    <div>
                                        <input
                                            value={t4Ratio.value}
                                            onInput={(e) => {
                                                t4Ratio.value = (e.currentTarget as HTMLInputElement).valueAsNumber;
                                            }}
                                            min="0"
                                            step="1"
                                            type="number"
                                        />
                                    </div>
                                </td>
                            </tr>
                            <tr class="synthetic">
                                <td>
                                    T3 mcg : T4 mcg
                                </td>
                                <td class="right ratio">
                                    <div>
                                        <input
                                            value={compounded.value.t3Syn}
                                            onInput={(e) => {
                                                t4Ratio.value = compounded.value.t4Syn;
                                                t3Ratio.value = (e.currentTarget as HTMLInputElement).valueAsNumber;
                                                numGrains.value = t3Ratio.value / MPG_T3_SYN +
                                                    t4Ratio.value / MPG_T4_SYN;
                                            }}
                                            min="0"
                                            step="1"
                                            type="number"
                                        />
                                    </div> 
                                    <span class="separator"/> 
                                    <div>
                                        <input
                                            value={compounded.value.t4Syn}
                                            onInput={(e) => {
                                                t3Ratio.value = compounded.value.t3Syn;
                                                t4Ratio.value = (e.currentTarget as HTMLInputElement).valueAsNumber;
                                                numGrains.value = t3Ratio.value / MPG_T3_SYN +
                                                    t4Ratio.value / MPG_T4_SYN;
                                            }}
                                            min="0"
                                            step="1"
                                            type="number"
                                        />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="text-slab">
                    <strong>Changelog:</strong>
                    <p>
                        <ul>
                            <li>
                                1st November 2024: Migrated to new web framework and fixed some buggy input/ugly styling.
                            </li>
                            <li>
                                13th March 2024: Removed the synthetic/pure distinction as it was confusing and
                                unnecessary bloat.
                            </li>
                        </ul>
                    </p>
                </div>
            </>
        );
    },
});