import React, { useEffect } from 'react';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  withIonLifeCycle,
  IonButtons,
  IonMenuButton,
  IonButton,
} from '@ionic/react';
import './Tab3.css';

class Tab3 extends React.Component {
  componentDidMount() {
    console.log('Tab3 mount');
  }

  componentWillUnmount() {
    console.log('Tab3 unmount');
  }

  ionViewWillEnter() {
    console.log('IVWE Tab3');
  }

  // ionViewWillLeave() {
  //   console.log('IVWL Tab3');
  // }

  // ionViewDidEnter() {
  //   console.log('IVDE Tab3');
  // }

  // ionViewDidLeave() {
  //   console.log('IVDL Tab3');
  // }

  render() {
    return (
      <IonPage data-pageid="tab3-page">
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start">
              <IonMenuButton />
            </IonButtons>
            <IonTitle>Tab 3</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonButton routerLink="/routing/otherpage">Go to Other Page</IonButton>
        </IonContent>
      </IonPage>
    );
  }
}

export default withIonLifeCycle(Tab3);
