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

import './styles/styles.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>
      
      {/* With the condense property, the app header will stay on screen after srcolling down the page */}
      <IonHeader>
        <IonToolbar class="app-toolbar">
          <IonTitle class="ion-text-center screen-titles">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;