import {useEffect,useState} from 'react';
import {request} from './api';
import {Modal,useDiscardConfirmation} from './FormElements';
import {CrmContacts} from './CrmContacts';
import type {CrmOptions} from './SalesWorkspace';
export function CustomerContacts({id,label,onClose}:{id:number;label:string;onClose:()=>void}){
 const [options,setOptions]=useState<CrmOptions|null>(null),[error,setError]=useState(''),[dirty,setDirty]=useState(false),[ask,dialog]=useDiscardConfirmation();
 useEffect(()=>{const c=new AbortController();request<CrmOptions>('/crm/options',{signal:c.signal}).then(v=>{if(!c.signal.aborted)setOptions(v);}).catch(e=>{if(!c.signal.aborted)setError(e.message);});return()=>c.abort();},[]);
 async function close(){if(!dirty||await ask('Ungespeicherte Kontaktänderungen verwerfen?'))onClose();}
 return <><Modal title={`Kontakte · ${label}`} wide onClose={()=>void close()}><div className="modal-body">{error&&<p className="alert error" role="alert">{error}</p>}{options?<CrmContacts options={options} initialCustomer={{id,label}} onDirtyChange={setDirty}/>:!error&&<p>Kontakte werden geladen …</p>}</div></Modal>{dialog}</>;
}