ffsaf-site/src/main/webapp/src/components/MemberCustomFiels.jsx

import {useEffect, useState} from "react";
import {getCategoryFormBirthDate, getCatName} from "../utils/Tools.js";
import {useCountries} from "../hooks/useCountries.jsx";

export function BirthDayField({inti_date, inti_category, required = true}) {
    const [date, setDate] = useState(inti_date)
    const [category, setCategory] = useState(inti_category)
    const [canUpdate, setCanUpdate] = useState(false)
    useEffect(() => {
        const b = category !== getCategoryFormBirthDate(new Date(date))
        if (b !== canUpdate)
            setCanUpdate(b)
    }, [date, category])

    const updateCat = _ => {
        setCategory(getCategoryFormBirthDate(new Date(date)))
    }

    return <>
        <div className="input-group mb-3">
            <span className="input-group-text" id="birth_date">Date de naissance</span>
            <input type="date" className="form-control" placeholder="jj/mm/aaaa" aria-label="birth_date"
                   name="birth_date" aria-describedby="birth_date" defaultValue={date} required={required}
                   onChange={(e) => setDate(e.target.value)}/>
        </div>
        <div className="row">
            <div className="input-group mb-3">
                <span className="input-group-text" id="category">Catégorie</span>
                <input type="text" className="form-control" placeholder="" name="category"
                       aria-label="category" value={category ? getCatName(category) : ""} aria-describedby="category"
                       disabled/>
                {canUpdate && <button className="btn btn-outline-secondary" type="button" id="button-addon1"
                                      onClick={updateCat}>Mettre à jours</button>}
            </div>
        </div>
    </>
}

export function OptionField({name, text, values, value, disabled = false}) {
    return <div className="row">
        <div className="input-group mb-3">
            <label className="input-group-text" id={name}>{text}</label>
            <select className="form-select" id={name} name={name} defaultValue={value} required disabled={disabled}>
                {Object.keys(values).map((key, _) => {
                    return (<option key={key} value={key}>{values[key]}</option>)
                })}
            </select>
        </div>
    </div>
}

export function RoleList({name, text, value, disabled = false}) {
    return <OptionField name={name} text={text} value={value} disabled={disabled}
                        values={{
                            MEMBRE: 'Membre',
                            PRESIDENT: 'Président',
                            TRESORIER: 'Trésorier',
                            SECRETAIRE: 'Secrétaire',
                            VPRESIDENT: 'Vise-Président',
                            VTRESORIER: 'Vise-Trésorier',
                            VSECRETAIRE: 'Vise-Secrétaire',
                            MEMBREBUREAU: 'Membre bureau'
                        }}/>
}

export function CountryList({name, text, value, values = undefined, disabled = false}) {
    const country = useCountries('fr')
    const [value_, setValue] = useState(value)

    if (values === undefined) {
        values = {...country}
    }

    return <div className="row">
        <div className="input-group mb-3">
            <label className="input-group-text" id={name}>{text}</label>
            <select className="form-select" id={name} name={name} value={value_} required disabled={disabled}
                    onChange={e => setValue(e.target.value)}>
                {Object.keys(values).sort((a, b) => {
                    if (a < b) return -1
                    if (a > b) return 1
                    return 0
                }).map((key, _) => {
                    return (<option key={key} value={key}>{values[key]}</option>)
                })}
            </select>
        </div>
    </div>
}

export function TextField({name, text, value, placeholder, type = "text", disabled = false, required = true, ttip = null}) {
    return <div className="row mb-3">
        <div className="input-group">
            <span className="input-group-text" id={name}>{text}</span>
            <input type={type} className="form-control" placeholder={placeholder ? placeholder : text} aria-label={name}
                   name={name} aria-describedby={name} defaultValue={value} disabled={disabled} required={required}/>
        </div>
        {ttip}
    </div>
}

export function CheckField({name, text, value, row = false}) {
    return <>{
        row ?
            <div className="row">
                <div className="input-group mb-3">
                    <div className="form-check">
                        <input className="form-check-input" type="checkbox" id={name} name={name}
                               defaultChecked={value}/>
                        <label className="form-check-label" htmlFor={name}>{text}</label>
                    </div>
                </div>
            </div>
            : <div className="form-check">
                <input className="form-check-input" type="checkbox" id={name} name={name} defaultChecked={value}/>
                <label className="form-check-label" htmlFor={name}>{text}</label>
            </div>
    }
    </>
}

export const Checkbox = ({label, value, onChange}) => {
    const handleChange = () => {
        onChange(!value);
    };

    return <div className="form-check">
        <input className="form-check-input" type="checkbox" id="checkbox1" checked={value} onChange={handleChange}/>
        <label className="form-check-label" htmlFor="checkbox1">{label}</label>
    </div>
};