import {
  IonAccordion,
  IonAccordionGroup,
  IonCard,
  IonContent,
  IonHeader,
  IonItem,
  IonLabel,
  IonPage,
  IonTitle,
  IonToolbar} from '@ionic/react';

import './Flag.css';

// generate single accordion item given a title and points of info
const AccordionItem = (title: string, content: string[]) => {
  return (
    <IonAccordion value={title}>
      <IonItem slot="header" color="light">
        <IonLabel class="ion-text-center">{title}</IonLabel>
      </IonItem>
      <div className="ion-padding" slot="content">
        {
          // generate each point in content
          content.map((text: string) =>{
            return (
              <IonCard color="light">
                <IonItem>
                <IonLabel class="ion-text-center">{text}</IonLabel>
                </IonItem>
              </IonCard>
            );
          })
        }
      </div>
    </IonAccordion>)
}

const Flag: React.FC = () => {
  // Load Flag.json which has format of Object[],
  // where each object has a title and content field.
  let content = require("./Flag.json")
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
        <IonTitle class="ion-text-center">TPC</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Flag</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonAccordionGroup multiple={true}>
          {
            // generate an accordion item for each object in Flag.json
            content.map((obj: any) => AccordionItem(obj.title, obj.content))
          }
        </IonAccordionGroup>
      </IonContent>
    </IonPage>
  );
}

export default Flag;