import {useNavigate} from "react-router-dom";
import {LoadingProvider} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {toast} from "react-toastify";
import {apiAxios, getToastMessage} from "../../../utils/Tools.js";
import {CountryList, TextField} from "../../../components/MemberCustomFiels.jsx";

import {useRef, useState} from "react";
import {LocationEditor, LocationEditorModal} from "../../../components/Club/LocationEditor.jsx";
import {ContactEditor} from "../../../components/Club/ContactEditor.jsx";
import {HoraireEditor} from "../../../components/Club/HoraireEditor.jsx";
import {useTranslation} from "react-i18next";

export function NewClubPage() {
    const navigate = useNavigate()
    const {t} = useTranslation();

    return <>
        <h2>{t('pageNouveauClub')}</h2>
        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/club")}>
            {t('back')}
        </button>
        <div>
            <div className="row">
                <div className="col-lg-9">
                    <LoadingProvider>
                        <InformationForm/>
                    </LoadingProvider>
                </div>
            </div>
        </div>
    </>
}

function InformationForm() {
    const [switchOn, setSwitchOn] = useState(false);
    const [modal, setModal] = useState({id: -1})
    const locationModalCallback = useRef(null)
    const navigate = useNavigate()
    const {t} = useTranslation();

    const {data} = useFetch(`/club/contact_type`)

    const handleSubmit = (event) => {
        event.preventDefault();

        const formData = new FormData(event.target);

        toast.promise(
            apiAxios.put(`/club`, formData), getToastMessage("club.toast.new")
        ).then(data => {
            navigate(`/admin/club/${data.data}`);
        })
    }

    return <>
        <form onSubmit={handleSubmit} autoComplete="off">
            <div className="card mb-4">
                <div className="card-header">{t('nouveauClub')}</div>
                <div className="card-body text-center">

                    <TextField name="name" text={t('nom')+"*"}/>
                    <CountryList name="country" text={t('pays')+"*"} value={"FR"}/>

                    <div className="mb-3">
                        <div className="input-group">
                            <label className="input-group-text" htmlFor="logo">{t('blason')}</label>
                            <input type="file" className="form-control" id="logo" name="logo"
                                   accept=".jpg,.jpeg,.gif,.png,.svg"/>
                        </div>
                    </div>

                    <div className="input-group mb-3">
                        <div className="input-group-text">
                            <input type="checkbox" className="form-check-input mt-0" name="international" id="international"
                                   checked={switchOn} onChange={() => setSwitchOn(!switchOn)}/>
                            <label className="input-group-text" htmlFor="international">{t('clubExterne')}</label>
                        </div>
                    </div>
                    {!switchOn && <>
                        <TextField name="state_id" text={t('siretOuRna')} required={false}/>
                        <TextField name="contact_intern" text={t('contactInterne')} required={false} placeholder="example@test.com"/>
                        <TextField name="address" text={t('adresseAdministrative')} required={false} placeholder="Adresse administrative"/>

                        <div className="mb-3">
                            <div className="input-group">
                                <label className="input-group-text" htmlFor="status">{t('status')}</label>
                                <input type="file" className="form-control" id="status" name="status" accept=".pdf,.txt"/>
                            </div>
                        </div>

                        <ContactEditor data={{contact: {}, contactMap: data}}/>
                        <LocationEditor data={{training_location: null}} setModal={setModal} sendData={locationModalCallback}/>
                        <HoraireEditor data={{training_day_time: null}}/>
                    </>
                    }
                </div>
                <div className="row mb-3">
                    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" className="btn btn-primary">{t('button.enregistrer')}</button>
                    </div>
                </div>
            </div>
        </form>

        <LocationEditorModal modal={modal} sendData={locationModalCallback}/>
    </>
}
