import { html, Component, render, createContext, useState, useEffect } from 'https://unpkg.com/htm/preact/standalone.mjs';
import { getRecords } from './api.js';

const rdataInputProperties = {
    Address: {label: 'adresse', type: 'text'},
    Serial: {label: 'serial', type: 'number'},
    Minimum: {label: 'minimum', type: 'number'},
    Retry: {label: 'nouvelle tentative', type: 'number'},
    Refresh: {label: 'actualisation', type: 'number'},
    MaintainerName: {label: 'contact', type: 'text'},
    MasterServerName: {label: 'serveur primaire', type: 'text'},
    Expire: {label: 'expiration', type: 'number'},
    Target: {label: 'cible', type: 'text'},
}

const Editable = createContext(false);


function RDataInput({ name, value = '', index = 0 }) {
    const {label, type} = rdataInputProperties[name] || {label: name, type: 'text'};

    return html`
        <${Editable.Consumer}>
            ${
                (editable) => {
                    if (editable) {
                        return html`
                            <div>
                                <label for=record_${index}_${name}>${label}:</label>
                                <input id=record_${index}_${name} type=${type} value=${value} />
                            </div>
                        `;
                    } else {
                        return html`
                            <div>
                                <span class=label>${label}:</span>
                                <span class=value>${value}</span>
                            </div>
                        `
                    }
                }
            }
        <//>
    `;
}

function RData({ rdata, index }) {
    const { Address: address } = rdata;
    return Object.entries(rdata).map(([name, value]) => html`<${RDataInput} name=${name} value=${value} index=${index} />`);
}


function Record({name, ttl, type, rdata, index = 0}) {
    return html`
        <tr>
            <td class=domain>${name}</div>
            <td class=type>${type}</div>
            <td class=ttl>${ttl}</div>
            <td class=rdata><${RData} rdata=${rdata} index=${index}/></div>
        </tr>
    `;
}

function RecordList({ zone }) {
    const [records, setRecords] = useState([]);
    const [editable, setEditable] = useState(false);

    const toggleEdit = () => setEditable(!editable);

    useEffect(() => {
        getRecords(zone)
            .then((res) => setRecords(res));
    }, [])


    return html`
        <${Editable.Provider} value=${editable}>
            <button onclick=${toggleEdit}>${ editable ? 'Save' : 'Edit'}</button>
            <table class=record-list>
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Type</th>
                        <th>TTL</th>
                        <th>Données</th>
                    </tr>
                </thead>
                <tbody>
                    ${records.map(
                        ({Name, Class, TTL, Type, ...rdata}, index) => {
                            return html`<${Record} name=${Name} ttl=${TTL} type=${Type} rdata=${rdata} index=${index}/>`
                        }
                    )}
                </tbody>
            </ul>
        <//>
    `;
}

export { RecordList };