import React from "react";
import { useEffect, useState } from "react";
import { Link, Outlet, useNavigate, useParams, useLocation } from "react-router-dom";
import "./Index.css";
export const NewServiceProvider = () => {
    let navigate = useNavigate()
    const [loading, setLoading] = useState(false)
    const [url, setURL] = useState('')

    const makeNewConn = () => {
        setLoading(true)
        fetch('/api/serviceProviders', {
            method: 'POST',
            headers: {
            'Content-Type': 'application/json'
            },
            body: JSON.stringify({url: url})
        }).then(x => x.json()).then(x => {
            setLoading(false)
            navigate('..', {replace: true})
        })
    }

    return (
        <div className="c-modal-overlay">
            <div className="c-modal">
                <div className="c-form-row">
                    <input className="c-input" value={url} onInput={e => setURL(e.target.value)}type="text" placeholder="url"/>
                </div>
                <div className="c-modal-buttons">
                    <button className="c-button" onClick={makeNewConn} disabled={loading}>Verbind</button>
                </div>
            </div>
        </div>
    )
}

export const ActivateServiceProvider = () => {

    let params = useParams()
    const connId = params.connId
    let navigate = useNavigate()
    const [loading, setLoading] = useState(false)
    const [psk, setPSK] = useState('')

    const activateConn = () => {
        setLoading(true)
        fetch(`/api/serviceProviders/${connId}/activate`, {
            method: 'POST',
            headers: {
            'Content-Type': 'application/json'
            },
            body: JSON.stringify({psk: psk})
        }).then(x => x.json()).then(x => {
            setLoading(false)
            navigate('..', {replace: true})
        })
    }

    return (
        <div className="c-modal-overlay">
            <div className="c-modal">
                <div className="c-form-row">
                    <input className="c-input" value={psk} onInput={e => setPSK(e.target.value)}type="text" placeholder="tijdelijk wachtwoord"/>
                </div>
                <div className="c-modal-buttons">
                    <button className="c-button" onClick={activateConn} disabled={loading}>Activeer</button>
                </div>
            </div>
        </div>
    )
}

const Connections = () => {
    let location = useLocation();
    const [serviceProviders, setConnections] = useState([])
    useEffect(() => {
        fetch('/api/serviceProviders').then(x => x.json()).then(x => setConnections(x) )
    }, [location])

    return (
        <div>
            <Outlet/>
            <h1 className="t-page-header">Verbindingen</h1>
            <Link to="/dienstverleners/nieuw" className="c-button">Nieuwe verbinding</Link>
            <table className="c-table">
                <thead>
                    <tr>
                        <th>Adres</th>
                        <th>Systeem</th>
                        <th>Leverancier</th>
                        <th>Status</th>
                        <th>Diensten</th>
                        <th>Acties</th>
                    </tr>
                </thead>
                <tbody>
                {serviceProviders.map(x => {
                    return (<tr key={x.ID}>
                        <td>{x.Addr}</td>
                        <td>{x.System ? x.System : 'Onbekend'}</td>
                        <td>{x.Supplier ? x.Supplier : 'Onbekend'}</td>
                        <td>{x.State == "pending" ? 'in afwachting' : 'actief'}</td>
                        <td>{
                            x.State == "pending" ? "" : (
                                x.Services.length ? x.Services.map((s) => {
                                    return <span style={{marginRight: 10}} key={s.ID}>{s.Name}</span>
                                }) : <Link style={{marginRight: 10}} to={`/dienstverleners/${x.ID}`}>Beschikbare diensten</Link>
                            )}</td>
                        <td>
                            {x.State == "pending" ? (
                                <Link to={`/dienstverleners/${x.ID}/activeer`}>Afronden verbinding</Link>
                            ) : (
                                x.Services.length ? <Link to={`/dienstverleners/${x.ID}`}>Beheer</Link> : <Link to={`/dienstverleners/${x.ID}`}>Activeer</Link>
                            )}
                        </td>
                    </tr>)
                })}
                </tbody>
            </table>
        </div>
    );
};

export default Connections;