<body>
    <h1>Weezard</h1>
    <label for="policy_valid_upto_date">Is the policy valid up to a date?</label>
    <input type="date" id="policy_valid_upto_date" name="policy_valid_upto_date">

    <br>
    <br>

    <label for="policy_valid_after_date">Is the policy valid from a date?</label>
    <input type="date" id="policy_valid_after_date" name="policy_valid_after_date">

    <br>
    <br>

    <label for="policy_mutable">Is the policy editable (mutable)?</label>
    <br>
    <select name="policy_mutable" id="policy_mutable">
        <option disabled selected value> -- select an option -- </option>
        <option value="true">Yes</option>
        <option value="false">No</option>
    </select>

    <br>
    <br>

    <label for="remote_available">Can recovery be authorized using threshold based cryptographic signing?</label>
    <br>
    <select name="remote_available" id="remote_available">
        <option disabled selected value> -- select an option -- </option>
        <option value="true">Yes</option>
        <option value="false">No</option>
    </select>

    <br>
    <br>

    <label>What threshold would you like to use for the cryptographic signing recovery method? (2/3, 3/5, 4/7
        etc)</label>
    <br>
    <input type="text" id="remote_threshold" name="remote_threshold">
    <!-- if is_remote_available is true -->
    <p>Please select public keys which can be used for recovery:</p>
    <input type="file" id="pub_keys" name="files[]" multiple>

    <br>
    <br>

    <label>Can recovery be authorized by persons using KYC?</label>
    <br>
    <select name="kyc_available" id="kyc_available">
        <option disabled selected value> -- select an option -- </option>
        <option value="true">Yes</option>
        <option value="false">No</option>
    </select>

    <br>
    <br>

    <label>What threshold would you like to use for the KYC recovery method? (2/3, 3/5, 4/7 etc)</label>
    <br>
    <input type="text" id="kyc_threshold" name="kyc_threshold">

    <p>Please select KYC data for individuals who can participate in recovery:</p>
    <input type="file" id="kyc_data" name="files[]" multiple>

    <br>
    <br>

    <label>Are both remote and KYC based recovery required? (If "No", either one can be used for recovery)</label>
    <br>
    <select name="multi_rule_requirement" id="multi_rule_requirement">
        <option disabled selected value> -- select an option -- </option>
        <option value="true">Yes</option>
        <option value="false">No</option>
    </select>

    <button onclick="generatePolicy()">Generate Policy</button>

    <script>
        function extractValues() {
            const policy = {}

            const policy_valid_upto_date_el = document.getElementById('policy_valid_upto_date');
            const policy_valid_upto_date = policy_valid_upto_date_el.value.replace(/-/g, "/");
            policy.policy_valid_upto_date = policy_valid_upto_date;
            console.log(policy_valid_upto_date);

            const policy_valid_after_date_el = document.getElementById('policy_valid_after_date');
            const policy_valid_after_date = policy_valid_after_date_el.value.replace(/-/g, "/");
            policy.policy_valid_after_date = policy_valid_after_date;
            console.log(policy_valid_after_date);

            const policy_mutable_el = document.getElementById('policy_mutable');
            const policy_mutable = policy_mutable_el.value;
            policy.policy_mutable = policy_mutable;
            console.log(policy_mutable);

            const remote_available_el = document.getElementById('remote_available');
            const remote_available = remote_available_el.value;
            policy.remote_available = remote_available;
            console.log(remote_available);

            const remote_threshold_el = document.getElementById('remote_threshold');
            const remote_threshold = remote_threshold_el.value;
            policy.remote_threshold = remote_threshold;
            console.log(remote_threshold);

            const pub_keys_el = document.getElementById('pub_keys');
            const pub_keys = pub_keys_el.files;
            policy.pub_keys = pub_keys;
            console.log(pub_keys);

            const kyc_available_el = document.getElementById('kyc_available');
            const kyc_available = kyc_available_el.value;
            policy.kyc_available = kyc_available;
            console.log(kyc_available);

            const kyc_threshold_el = document.getElementById('kyc_threshold');
            const kyc_threshold = kyc_threshold_el.value;
            policy.kyc_threshold = kyc_threshold;
            console.log(kyc_threshold);

            const kyc_data_el = document.getElementById('kyc_data');
            const kyc_data = kyc_data_el.files;
            policy.kyc_data = kyc_data;
            console.log(kyc_data);

            const multi_rule_requirement_el = document.getElementById('multi_rule_requirement');
            const multi_rule_requirement = multi_rule_requirement_el.value;
            policy.multi_rule_requirement = multi_rule_requirement;
            console.log(multi_rule_requirement);

            return policy;
        }

        function generatePolicy(values) {
            const policy_values = extractValues();

            const toml_policy = objectToTOML(policy_values);
            console.log(toml_policy);
        }

        function objectToTOML(obj, indent = '') {
            let toml = '';

            for (const key in obj) {
                if (obj.hasOwnProperty(key)) {
                    const value = obj[key];

                    if (typeof value === 'object' && !Array.isArray(value)) {
                        toml += `${indent}[${key}]\n`;
                        toml += objectToTOML(value, `${indent}  `);
                    } else if (Array.isArray(value)) {
                        toml += `${indent}${key} = [${value.map(v => JSON.stringify(v)).join(', ')}]\n`;
                    } else {
                        toml += `${indent}${key} = ${JSON.stringify(value)}\n`;
                    }
                }
            }

            return toml;
        }
    </script>

</body>