import {
    IonPage,
    IonContent,
    IonHeader,
    IonTitle,
    IonToolbar,
    IonFooter,
    IonImg,
    IonGrid,
    IonRow,
    IonCol,
    useIonViewWillEnter,
    IonButtons,
    IonBackButton,
    IonCard,
    IonItem,
    IonCardHeader,
    IonCardSubtitle
} from '@ionic/react';
import React, { useState } from 'react';
import './Capsule.css';
import { useParams } from 'react-router';
import { CapsuleInfo, getMessage } from '../data/CapsuleInfo';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';
import RobertoClemente from '../assets/RobertoClemente.jpg';

const Capsule: React.FC = () => {
    const [capinfo, setMessage] = useState<CapsuleInfo>();
    const params = useParams<{ id: string }>();

    useIonViewWillEnter(() => {
        const msg = getMessage(parseInt(params.id, 10));
        setMessage(msg);
    });

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar className="Header-Color">
                    <IonGrid fixed={true}>
                        <IonRow>
                            <IonCol></IonCol>
                            <IonCol>
                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
                                <IonTitle>Cápsula</IonTitle>
                            </IonCol>
                            <IonCol></IonCol>
                        </IonRow>
                    </IonGrid>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen className="ion-padding">
                {capinfo ? (
                    <>
                        <h1>{capinfo.title}</h1>
                        <p>{capinfo.Text1}</p>
                        <p>{capinfo.Text2}</p>
                        <p>{capinfo.Text3}</p>
                        <p>{capinfo.Text4}</p>
                        <p>{capinfo.Text5}</p>
                        <p>{capinfo.Text6}</p>
                        <p>{capinfo.Text7}</p>
                        <p>{capinfo.Text8}</p>
                        <p>{capinfo.Text9}</p>
                        <p>{capinfo.Text10}</p>
                        <p></p>
                        <h2>{capinfo.mensage}</h2>
                        <IonCard>
                            <IonItem routerLink={`/Biographie/${capinfo.id1}`} detail={true}>
                                <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
                                <IonCardHeader>
                                    <IonCardSubtitle>{capinfo.nombre1}</IonCardSubtitle>
                                </IonCardHeader>
                            </IonItem>
                        </IonCard>
                        <IonCard>
                            <IonItem routerLink={`/Biographie/${capinfo.id2}`} detail={true}>
                                <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
                                <IonCardHeader>
                                    <IonCardSubtitle>{capinfo.nombre2}</IonCardSubtitle>
                                </IonCardHeader>
                            </IonItem>
                        </IonCard>
                        <IonCard>
                            <IonItem routerLink={`/Biographie/${capinfo.id3}`} detail={true}>
                                <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
                                <IonCardHeader>
                                    <IonCardSubtitle>{capinfo.nombre3}</IonCardSubtitle>
                                </IonCardHeader>
                            </IonItem>
                        </IonCard>
                    </>
                ) : (
                    <div>Message not found</div>
                )}
            </IonContent>
            <IonFooter>
                <IonToolbar className="Footer-Color">
                    <div className='Item-Center'>
                        <IonButtons slot="start">
                            <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
                        </IonButtons>
                    </div>
                </IonToolbar>
            </IonFooter>
        </IonPage>
    );
};

export default Capsule;