import {
    IonPage,
    IonContent,
    IonHeader,
    IonToolbar,
    IonFooter,
    IonImg,
    IonGrid,
    IonRow,
    IonCol,
    IonButtons,
    IonBackButton,
    useIonViewWillEnter,
    IonItem,
    IonIcon
} from '@ionic/react';
import { useParams } from 'react-router';
import React, { useState } from 'react';
import { BioInfo, getMessage } from '../data/BioInfo';
import './Biography.css';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';
import { clipboardOutline } from 'ionicons/icons';

const Biography: React.FC = () => {
    const [bioinfo, setMessage] = useState<BioInfo>();
    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>
                                
                            </IonCol>
                            <IonCol></IonCol>
                        </IonRow>
                    </IonGrid>
                </IonToolbar>
            </IonHeader>

            <IonContent fullscreen className="ion-padding">
                {bioinfo ? (
                    <>
                        <IonItem>
                            <IonImg style={{ height: 300, width: 600 }} src={bioinfo.photo} alt='Logo'></IonImg>
                            <p>
                                <h1>{bioinfo.title}</h1>
                                {bioinfo.tags}
                                <p>{bioinfo.birth}</p>
                                <p>{bioinfo.place}</p>
                                <p>{bioinfo.death}</p>
                            </p>
                        </IonItem>
                        <p dangerouslySetInnerHTML={{ __html: bioinfo.Text }}></p>
                        <p>{bioinfo.continue}</p>
                        <a href={bioinfo.url} target="_blank" rel="noreferrer">For more information press here</a>
                        <p> </p>
                        <IonItem routerLink={`/Question/${bioinfo.id}`} detail={true}>
                            <IonIcon icon={clipboardOutline} />Tomar quiz
                        </IonItem>
                    </>
                ) : (
                    <div>Biography not found</div>
                )}
            </IonContent>

            <IonFooter>
                <IonToolbar className="Footer-Color">
                    <div className='Item-Center'>
                        <IonButtons slot="start">
                            <IonBackButton defaultHref="/home"></IonBackButton>
                        </IonButtons>
                    </div>
                </IonToolbar>
            </IonFooter>
        </IonPage>
    );
};

export default Biography;