import {LoadingProvider, useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {toast} from "react-toastify";
import {apiAxios, errFormater, getToastMessage} from "../../../utils/Tools.js";
import {AxiosError} from "../../../components/AxiosError.jsx";
import {AffiliationCard, BureauCard} from "./AffiliationCard.jsx";
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 {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faFilePdf} from "@fortawesome/free-solid-svg-icons";
import {SmartLogoBackground} from "../../../components/SmartLogoBackground.jsx";
import {useTranslation} from "react-i18next";

const vite_url = import.meta.env.VITE_URL;

export function MyClubPage() {
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/club/me`, setLoading, 1)
    const {t} = useTranslation();

    return <>
        <h3>{t('donnéesAdministratives')}</h3>
        {data
            ? <div>
                <div className="row">
                    <div className="col-lg-9">
                        <LoadingProvider>
                            <InformationForm data={data}/>
                        </LoadingProvider>
                    </div>
                    <div className="col-lg-3">
                        <LoadingProvider>
                            <AffiliationCard clubData={data}/>
                            <BureauCard clubData={data}/>
                        </LoadingProvider>
                    </div>
                </div>
            </div>
            : error && <AxiosError error={error}/>
        }
    </>
}

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

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

        const formData = new FormData(event.target);

        toast.promise(apiAxios.put(`/club/me`, formData), getToastMessage('club.toast.save'))
    }

    return <>
        <form onSubmit={handleSubmit} autoComplete="off">
            <div className="card mb-4">
                <input name="id" value={data.id} readOnly hidden/>
                <div className="card-header">{t('affiliationNo', {no: data.no_affiliation})}</div>
                <div className="card-body text-center">
                    <TextField name="name" text={t('nom')} value={data.name} disabled={true}/>
                    <CountryList name="country" text={t('pays')} value={data.country} disabled={true}/>

                    {!data.international && <>
                        <TextField name="state_id" text={t('siretOuRna')} value={data.state_id} disabled={true}/>
                    </>}

                    <div className="row mb-3">
                        <div className="col-md-6">
                            <SmartLogoBackground
                                src={`${vite_url}/api/club/${data.clubId}/logo`}
                                alt="avatar"
                                ingClassName="img-fluid" style={{object_fit: 'contain', maxHeight: '15em'}}/>
                        </div>
                        <div className="col-md-6">
                            <a href={`${vite_url}/api/club/${data.id}/status`} target='_blank'>
                                <button className="btn btn-outline-secondary" type="button" id="button-addon1"
                                        onClick={_ => null}>
                                    <FontAwesomeIcon icon={faFilePdf} size="5x"></FontAwesomeIcon><br/>
                                    {t('voirLesStatues')}
                                </button>
                            </a>
                        </div>
                        <div className="form-text" id="status">{t('club.change.status')}</div>
                    </div>

                    {!data.international && <>
                        <TextField name="contact_intern" text={t('contactInterne')} value={data.contact_intern} required={false}
                                   placeholder="example@test.com"/>
                        <TextField name="address" text={t('adresseAdministrative')} value={data.address} placeholder={t('adresseAdministrative')}/>

                        <ContactEditor data={data}/>
                        <LocationEditor data={data} setModal={setModal} sendData={locationModalCallback}/>
                        <HoraireEditor data={data}/>
                    </>
                    }
                </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}/>
    </>
}
