export interface IFaqProps {
description: string;
items: IExampleItem[];
}
export type IExampleItem = { Question: string; Reponse: string; Categorie: {Title :string}; Langue: string };


import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { sp } from "@pnp/sp";
import * as strings from 'FaqWebPartStrings';
import Faq from './components/Faq';
import { IFaqProps , IExampleItem} from './components/IFaqProps';

export interface IFaqWebPartProps {
description: string;
}

export default class FaqWebPart extends BaseClientSideWebPart<IFaqWebPartProps> {

public render(): void {
const element: React.ReactElement<IFaqProps > = React.createElement(
Faq,
{
description: this.properties.description,
items : this._getFacItems()

}
);

ReactDom.render(element, this.domElement);
}

//get faq list
public _getFacItems() : Promise <IExampleItem[]> {

return sp.web.lists.getByTitle("FAQ_List").items
.select("Question", "Reponse","Categorie", "Langue")
.orderBy("Created", true)
.get()


}


private _onRenderCell(item: IExampleItem, index: number | undefined): JSX.Element {
return (
<div className={classNames.itemCell} data-is-focusable={true}>
<Image className={classNames.itemImage} src={item.Reponse} width={50} height={50} imageFit={ImageFit.cover} />
<div className={classNames.itemContent}>
<div className={classNames.itemName}>{item.Langue}</div>
<div className={classNames.itemIndex}>{`Item ${index}`}</div>
<div>{item.Categorie.Title}</div>
</div>
<Icon className={classNames.chevron} iconName={getRTL() ? 'ChevronLeft' : 'ChevronRight'} />
</div>
);
}