import { html, render, useState, useEffect } from './vendor/preact/standalone.js';

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 recordTypes = {
    'A': 'address',
    'AAAA': 'address',
    'SRV': 'service',
    'CNAME': 'alias',
    'NS': 'name_server',
    'SOA': 'soa',
};

const recordTypeNames = {
    'address': 'Adresse IP',
    'service': 'Service',
    'alias': 'Alias',
    'name_server': 'Serveur de nom',
    'soa': 'SOA',
}

function getNameForRecord(name, type) {
    return name;
}

function getTypeForRecord(name, type) {
    return recordTypes[type];
}

function processRecords(records) {
    return records.reduce((acc, record) => {
        let name = getNameForRecord(record.Name, record.Type);
        let type = getTypeForRecord(record.Name, record.Type);
        if (!(name in acc)) {
            acc[name] = {};
        }
        if (!(type in acc[name])) {
            acc[name][type] = [];
        }
        acc[name][type].push(record);
        return acc;
    }, {});
}
const recordsKeys = {
    'address': (record) => { return [[ 'Address', record.Address ]] },
    'service': (record) => { /* TODO */ },
    'alias': (record) => { return [[ 'Target', record.Target ]] },
    'name_server': (record) => { return [[ 'Target', record.Target ]] },
    'soa': (record) => {
        return [
            [ 'MasterServerName', record.MasterServerName ],
            [ 'MaintainerName', record.MaintainerName ],
            [ 'Refresh', record.Refresh ],
            [ 'Retry', record.Retry ],
            [ 'Expire', record.Expire ],
            [ 'Minimum', record.Minimum ],
            [ 'Serial', record.Serial ],
        ]
    },
}

function FriendlyRecord({type, record}) {
    let keys = recordsKeys[type](record);
    if (keys.length == 1) {
        return html`<span>${keys[0][1]}</span>`;
    } else {
        return html`
            <dl>
                ${keys.map(([name, value]) => {return html`<dt><span>${rdataInputProperties[name].label}</span></dt><dd>${value}</dd>`})}
            </dl>
        `;
    }
}

function RecordsByName({ name, recordSets }) {
    return html`
        <article>
            <h3>${name}</h4>
            <div>
                ${Object.entries(recordSets).map(
                    ([type, records]) => {
                        return html`
                            <article>
                                <h4>${recordTypeNames[type]}</h4>
                                <ul>
                                    ${records.map(record => html`<li><${FriendlyRecord} type=${type} record=${record}/></li>`)}
                                </ul>
                            </article>
                        `;
                    }
                )}
            </div>
        </article>
    `;
}



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

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

    return html`
        ${Object.entries(records).map(
            ([name, recordSets]) => {
                return html`

                    <${RecordsByName} name=${name} recordSets=${recordSets}/>
                `;
            }
        )}
    `;
}

function NewRecordFormFriendly({ zone }) {
    return html`
        <form class="new-record">
            <div>
                <label for="domain">Domaine</label>
                <div>
                    <input type="text" id="domain"/>
                    <span>.${ zone }</span>
                </div>
            </div>
            <div>
                <label for="record_type">Type d'enregistrement</label>
                <select id="record_type">
                    <option>Adresse IP</option>
                    <option>Alias</option>
                </select>
            </div>
            <div>
                <input type="text"/>
            </div>
            <div>
                <input type="submit" value="Enregistrer"/>
                <button role="button">Anuler</button>
            </div>
        </form>
    `;
}

function ZoneRecords({ zone }) {
    const [addNewRecord, setAddNewRecord] = useState(false);
    const [newRecords, setNewRecords] = useState([]);

    return html`
        <header>
            <h2>Enregistrements</h2>
            <button onClick=${() => setNewRecords([...newRecords, NewRecordFormFriendly({ zone })])}>Ajouter un enregistrement</button>
            <button>Éditer la zone</button>
        </header>
        ${newRecords}
        <${RecordListFriendly} zone=${zone}  />
    `;
}

export default function(element, { zone }) {
    render(html`<${ZoneRecords} zone=${zone} />`, element);
};