import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag'
const ADD_STAGIAIRE_TO_SEANCE_MUTATION = gql`
mutation addStagiaireToSeance($StagiaireId: Number!, $SeanceId: Number!) {
createPost(StagiaireId: $title, SeanceId: $SeanceId) {
id
}
}
`
const detailTemplate = (stagiaires,seance) => {
const [addStagiaireToSeance, { loading }] = useMutation(ADD_STAGIAIRE_TO_SEANCE_MUTATION)
function AddStagiaire (event){
console.log(event);
const stagiaireId = event.value;
const seanceId = seance.Id;
addStagiaireToSeance({
variables: { stagiaireId, seanceId },
update: (proxy, { data: { addStagiaireToSeance } })
}
)
}
function RemoveStagiaire(stagseance){
console.log(stagseance);
}
return(
<div className="grid grid-cols-2 gap-4">
<div>
<h4 className="text-md">Inscriptions</h4>
<ul className="w-full max-w-md">
{seance.StagiaireSeanceInfos.map((stag, index) => {
return (
<li key={index} className="p-4 mb-3 flex justify-between items-center bg-white shadow rounded-lg">
<div className="flex items-center">
{stag.Stagiaire.Photo != null ?
(<img className="w-10 h-10 rounded-full" src={stag.Stagiaire.Photo} alt={stag.Stagiaire.Name}/>)
:
(<i className="w-10 h-10 fad fa-user fa-3x"></i>)
}
<p className="ml-2 text-gray-700 font-semibold font-sans tracking-wide">{stag.Stagiaire.FirstName + " " + stag.Stagiaire.Name}</p>
</div>
<div className="flex">
<button aria-label="Delete user" className="p-1 focus:outline-none focus:shadow-outline text-red-500 hover:text-red-600" click="RemoveStagiaire(seance)">
<i className="fad fa-trash-alt fa-2x"></i>
</button>
</div>
</li>
)
})}
</ul>
</div>
<DropDownListComponent dataSource={stagiaires?.Stagiaires} fields={{ value: 'Id', text:'Name' }} allowFiltering="true" id="stagiaires" change={AddStagiaire} placeholder="Chercher un stagiaire" ignoreAccent={true} cssClass="self-start" >
</DropDownListComponent>
</div>
)
}
export default detailTemplate;
