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

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

    useIonViewWillEnter(() => {
        const capsule = getCapsule(parseInt(params.id, 10));
        setCapsule(capsule);
    });

    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>
                                
                            </IonCol>
                            <IonCol></IonCol>
                        </IonRow>
                    </IonGrid>
                </IonToolbar>
            </IonHeader>

            <IonContent fullscreen className="ion-padding">
                {capinfo ? (
                    <>
                        <IonImg style={{ height: 300, width: 600 }} src={`${capinfo.photo}`} alt='Imagen'></IonImg>
                        <h1>{capinfo.title}</h1>

                        <p dangerouslySetInnerHTML={{ __html: capinfo.content }}></p>

                        <IonCard>
                            <IonItem routerLink={`/Biography/${capinfo.bioId1}`} detail={true}>
                                <IonImg style={{ height: 300, width: 600 }} src={capinfo.bioPic1} alt='Logo'></IonImg>
                                <IonCardHeader>
                                    <IonCardSubtitle>{capinfo.bioName1}</IonCardSubtitle>
                                </IonCardHeader>
                            </IonItem>
                        </IonCard>
                        <IonCard>
                            <IonItem routerLink={`/Biography/${capinfo.bioId2}`} detail={true}>
                                <IonImg style={{ height: 300, width: 600 }} src={capinfo.bioPic2} alt='Logo'></IonImg>
                                <IonCardHeader>
                                    <IonCardSubtitle>{capinfo.bioName2}</IonCardSubtitle>
                                </IonCardHeader>
                            </IonItem>
                        </IonCard>
                        <IonCard>
                            <IonItem routerLink={`/Biography/${capinfo.bioId3}`} detail={true}>
                                <IonImg style={{ height: 300, width: 600 }} src={capinfo.bioPic3} alt='Logo'></IonImg>
                                <IonCardHeader>
                                    <IonCardSubtitle>{capinfo.bioName3}</IonCardSubtitle>
                                </IonCardHeader>
                            </IonItem>
                        </IonCard>
                    </>
                ) : (
                    <div>Capsule 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;