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

import { getRecords, createRecords } from './api.js';


const rdataInputProperties = {
    Address: {label: 'Adresse', type: 'text'},
    Serial: {label: 'Numéro de série', 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'},
    Service: {label: 'Service', type: 'text'},
    Protocol: {label: 'Protocole', type: 'text'},
    Priority: {label: 'Priorité', type: 'number'},
    Weight: {label: 'Poids', type: 'number'},
    Port: {label: 'Port', type: 'number'},
    Server: {label: 'Serveur', type: 'text'},
};

const realRecordDataConfig = {
    'A': {
        friendlyType: 'address',
        fields: ['Address'],
    },
    'AAAA': {
        friendlyType: 'address',
        fields: ['Address'],
    },
    'CNAME': {
        friendlyType: 'alias',
        fields: ['Target'],
    },
    'SRV': {
        friendlyType: 'service',
        fields: [ 'Priority', 'Weight', 'Port', 'Server' ],
    },
    'NS': {
        friendlyType: 'name_server',
        fields: ['Target'],
    },
    'SOA': {
        friendlyType: 'soa',
        fields: ['MasterServerName', 'MaintainerName', 'Refresh', 'Retry', 'Expire', 'Minimum', 'Serial'],
    },
};

function defaultBuildData(realRecordType) {
    const defaultFields = Object.fromEntries(realRecordDataConfig[realRecordType].fields.map(field => [field, null]));
    return (fields) => {
        return {...defaultFields, ...fields, Type: realRecordType};
    }
}

function defaultRecordToFields(realRecord) {
    const type = realRecord.Type;
    return realRecordDataConfig[type].fields.map(field => [field, realRecord[field]]);
}

function defaultGetName(name) {
    return name;
}

function srvRecordToFields({ Name, Type, Class, ...fields }) {
    const [ serviceName, protocol] = Name.split('.');
    return {
        Service: serviceName.replace(/^_/, ''),
        Protocol: protocol.replace(/^_/, ''),
        ...fields
    }
}

function srvGetName(originalName) {
    const [_serviceName, _protocol, ...name] = originalName.split('.');
    return name.join('.');
}

function buildAddressRecord(fields) {
    const address = fields.Address || '';
    if (address.indexOf('.') >= 0) {
        fields.Type = 'A';
    } else if (address.indexOf(':') >= 0) {
        fields.Type = 'AAAA';
    } else {
        fields.Type = '';
    }
    return fields;
}

function buildServiceRecord({ Name, Service, Protocol, ...fields}) {
    fields.Name = `_${Service}._${Protocol}.${Name}`;
    fields.Type = 'SRV';
    return fields;
}

const friendlyRecordDataConfig = {
    'address': {
        realRecordToFields: defaultRecordToFields,
        fields: realRecordDataConfig['AAAA'].fields,
        buildData: buildAddressRecord,
        getName: defaultGetName,
    },
    'alias': {
        realRecordToFields: defaultRecordToFields,
        fields: realRecordDataConfig['CNAME'].fields,
        buildData: defaultBuildData('CNAME'),
        getName: defaultGetName,
    },
    'name_server': {
        realRecordToFields: defaultRecordToFields,
        fields: realRecordDataConfig['NS'].fields,
        buildData: defaultBuildData('NS'),
        getName: defaultGetName,
    },
    'soa': {
        realRecordToFields: defaultRecordToFields,
        fields: realRecordDataConfig['SOA'].fields,
        buildData: defaultBuildData('SOA'),
        getName: defaultGetName,
    },
    'service': {
        realRecordToFields: srvRecordToFields,
        fields: ['Service', 'Protocol', 'Priority', 'Weight', 'Port', 'Server'],
        buildData: buildServiceRecord,
        getName: srvGetName,
    },
};


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

/* Name to use with spf for example */
function getFriendlyTypeForRecord(name, type) {
    return realRecordDataConfig[type].friendlyType;
}

function processRecords(records) {
    return records.reduce((acc, record) => {
        let type = getFriendlyTypeForRecord(record.Name, record.Type);
        let name = friendlyRecordDataConfig[type].getName(record.Name);
        if (!(name in acc)) {
            acc[name] = {};
        }
        if (!(type in acc[name])) {
            acc[name][type] = [];
        }
        acc[name][type].push(record);
        return acc;
    }, {});
}

function FriendlyRecord({type, record}) {
    let keys = friendlyRecordDataConfig[type].realRecordToFields(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 class="rrsets-per-name">
            <h3 class="record-name">${name}</h4>
            <div class="rrsets-per-type">
                ${Object.entries(recordSets).map(
                    ([type, records]) => {
                        return html`
                            <article class="rrset-per-type">
                                <h4 class="record-type">${recordTypeNames[type]}</h4>
                                <ul class="rrset-rdata">
                                    ${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 }) {
    const defaultVaules = {Name: '', TTL: 3600, Class: 'IN'};
    const [recordType, setRecordType] = useState(Object.keys(recordTypeNames)[0]);
    const [recordData, setRecordData] = useState(defaultVaules);
    const [realRecordData, setRealRecordData] = useState({});
    const [realType, setRealType] = useState('');

    const absoluteName = (name) => name ? `${name}.${zone}` : zone;

    const setRecordDataFactory = (field) => {
        return (e) => {
            const newData = {...recordData};
            newData[field] = e.target.type == 'number' ? Number(e.target.value) : e.target.value;
            const newRealRecordData = friendlyRecordDataConfig[recordType].buildData({...newData, Class: 'IN', Name: absoluteName(newData.Name)})

            setRecordData(newData);
            setRealRecordData(newRealRecordData);
            setRealType(newRealRecordData.Type);
        }
    }

    const createNewRecord = (e) => {
        e.preventDefault();
        const newRecords = [realRecordData];
        console.log(newRecords)
        createRecords(zone, newRecords);
    }

    const resetData = (resetName = false) => {
        setRealType('');
        const newName = resetName ? defaultVaules.Name : recordData.Name;
        setRecordData({ Name: newName, TTL:  defaultVaules.TTL });
        setRealRecordData({...defaultVaules, Name: absoluteName(newName)});
    }

    useEffect(() => resetData(true), []);

    // TODO: Reset valeurs champs quand changement de type + "annuler" => bound la valeur de l'input au state
    // TODO: Dans le cas où un domain est dans le RDATA mettre le domaine absolue dans la preview
    // TODO: Déplacer preview dans son component, faire une vue en "diff" et l'appeler "prévisualisation des changements"
    // TODO: Validation des données client et serveur

    return html`
        <section class="new-record">
            <header>
                <h2>Nouvel enregistrement</h2>
            </header>
            <form>
                <div class="form-row">
                    <div class="input-group">
                        <label for="domain">Domaine</label>
                        <div class="combined-input">
                            <input type="text" id="domain" name="domain" value=${recordData.Name} onInput=${setRecordDataFactory('Name')}/>
                            <span>.${ zone }</span>
                        </div>
                    </div>
                    <div class="input-group">
                        <label for="record_type">Type d'enregistrement</label>
                        <select id="record_type" name="record_type" onChange=${(e) => { setRecordType(e.target.value); resetData() }}>
                            ${Object.entries(recordTypeNames).map(([type, name]) => html`<option value="${type}">${name}</option>`)}
                        </select>
                    </div>
                    <div>
                        ${friendlyRecordDataConfig[recordType].fields.map(fieldName => html`
                        <div class="input-group">
                                <label for="${fieldName}">${rdataInputProperties[fieldName].label}</label>
                                <input id="${fieldName}" type="${rdataInputProperties[fieldName].type}" onInput=${setRecordDataFactory(fieldName)}></input>
                            </div>
                        `)}
                    </div>
                    <div class="input-group">
                        <label for="ttl">Durée dans le cache</label>
                        <input type="number" name="ttl" id="ttl" value=${recordData.TTL} onInput=${setRecordDataFactory('TTL')}/>
                    </div>
                </div>
                <article class="preview">
                    <h3>Prévisualisation des changements</h3>
                    <p>
                        <img src="/images/plus.svg" alt="Ajout" title="Ajout" class="addition"/>
                        <code class="addition">
                            ${realRecordData.Name === zone ? '@' : realRecordData.Name} ${realRecordData.TTL} ${realRecordData.Class} ${realType} ${realType != '' ? realRecordDataConfig[realType].fields.map(field => realRecordData[field]).join(' ') : ''}
                        </code>
                    </p>
                </article>
                <div>
                    <input type="submit" onClick=${createNewRecord} value="Ajouter"/>
                    <button type="reset" onClick=${e => { resetData(true); e.preventDefault() }}>Annuler</button>
                </div>
            </form>
        </section>
    `;
}

function ZoneRecords({ zone }) {
    return html`
        <${NewRecordFormFriendly} zone=${zone}/>

        <section>
            <header>
                <h2>Contenu de la zone</h2>
                <button>Éditer la zone</button>
            </header>

            <div class="zone-content">
                <${RecordListFriendly} zone=${zone} />
            </div>
        </section>
    `;
}

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