import {useEffect, useReducer, useState} from "react";
import {SimpleReducer} from "../../utils/SimpleReducer.jsx";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faAdd, faCircleQuestion, faTrashCan} from "@fortawesome/free-solid-svg-icons";
import {useTranslation} from "react-i18next";

export function ContactEditor({data}) {
    const [state, dispatch] = useReducer(SimpleReducer, [])
    const [out_data, setOutData] = useState({})
    const {t} = useTranslation();

    useEffect(() => {
        let i = 0;
        for (const key in data.contact) {
            dispatch({type: 'UPDATE_OR_ADD', payload: {id: i, data: {type: key, value: data.contact[key]}}})
            i = i + 1
        }
    }, [data.contact]);

    useEffect(() => {
        let out_data2 = {}
        state.forEach(d => {
            if (d.data !== undefined && d.data.value !== undefined)
                out_data2[d.data.type] = d.data.value
        })
        setOutData(out_data2)

        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    }, [state]);

    return <div className="row mb-3">
        <input name="contact" value={JSON.stringify(out_data)} readOnly hidden/>
        <span className="input-group-text">{t('contact', {count : 2})}</span>
        <ul className="list-group form-control">
            {state.map((d, index) => {
                if (d.data === undefined || d.data.value === undefined)
                    return;

                return <div key={index} className="input-group">
                    <select className="form-select" aria-label="type" value={d.data.type}
                            onChange={(e) => {
                                dispatch({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: {type: e.target.value, value: d.data.value}}})
                            }}>
                        {Object.keys(data.contactMap).map((key, _) => {
                            let b = false;
                            for (let s of state) {
                                if (s.data.type === key && s.data.value !== undefined) b = true;
                            }
                            return (<option key={key} value={key} disabled={b}>{data.contactMap[key]}</option>)
                        })}
                    </select>
                    <input type="text" className="form-control" value={d.data.value} required
                           onChange={(e) => {
                               dispatch({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: {type: d.data.type, value: e.target.value}}})
                           }}/>
                    <button type="button" className="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title={t("club.contact.tt." + d.data.type)} data-bs-html="true">
                        <FontAwesomeIcon icon={faCircleQuestion}/>
                    </button>
                    <button className="btn btn-danger" type="button"
                            onClick={() => dispatch({type: 'REMOVE', payload: d.id})}><FontAwesomeIcon
                        icon={faTrashCan}/>
                    </button>
                </div>
            })}
            <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                <button className="btn btn-success" type="button"
                        onClick={() => {
                            let id = null;
                            for (let key in data.contactMap) {
                                let b = false;
                                for (let s of state) {
                                    if (s.data.type === key && s.data.value !== undefined) b = true;
                                }
                                if (!b) {
                                    id = key
                                    break
                                }
                            }
                            if (id !== null) {
                                let maxId = 0;
                                state.forEach((d) => {
                                    if (d.id > maxId)
                                        maxId = d.id;
                                })
                                dispatch({type: 'UPDATE_OR_ADD', payload: {id: maxId + 1, data: {type: id, value: ''}}})
                            }
                        }}>
                    <FontAwesomeIcon icon={faAdd}/>
                </button>
            </div>
        </ul>
    </div>
}
