import { IonContent, IonHeader,IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonTitle, IonToolbar, IonButton, IonIcon, IonText } from '@ionic/react';
import { arrowDownCircle, heart } from 'ionicons/icons';
import { isPlatform } from '@ionic/react';

import './styles/styles.css';

// This is the date that is going to appear on the
// card with the Motivational message
const current = new Date();
const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;

// Determine which platform the app is running (ios or android)
// Compose message that will be opened with the click of a button
const separator = isPlatform('ios') === false ? '&' : '?'
const phoneNumber = '7877101934'
const message = 'Hola. Tengo una emergencia, mi ubicación es esta:'

const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;


const Home: React.FC = () => {

  return (
    
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle class="ion-text-center screen-titles">
            <IonText>TPC</IonText> 
            <IonButton href={finalMessage}> <IonIcon slot="icon-only" icon={heart}class="moti-download"></IonIcon></IonButton> 
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        

        {/* Card 1 */}
        <IonCard class="moti-card">
          <IonCardHeader class="card-header">
            <IonCardTitle class="card-date">
              {date}
              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton> 
            </IonCardTitle>
          </IonCardHeader>
          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./generatedMsgs/moti1.jpeg")}></IonImg>
        </IonCard>

        {/* Card 2 */}
        <IonCard class="moti-card">
          <IonCardHeader class="card-header">
            <IonCardTitle class="card-date">
              {date}
              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton>
            </IonCardTitle>
          </IonCardHeader>
          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./generatedMsgs/moti1.jpeg")}></IonImg>
        </IonCard>
      </IonContent>
    </IonPage>
  );
};

export default Home;
