// Created by Cynthia 
// Edited by Angel Romero 

import React, { useRef } from 'react';
import { IonButton, IonButtons, IonCard, IonCol, IonContent, IonGrid, IonHeader, IonModal, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
import './styles/styles.css';


// Create all the modal elements for each card element on the flag screen
const Flag: React.FC = () => {
  const amenazas = useRef<HTMLIonModalElement>(null);
  const intimidacion = useRef<HTMLIonModalElement>(null);
  const abusoEmo = useRef<HTMLIonModalElement>(null);
  const aislamiento = useRef<HTMLIonModalElement>(null);
  const desvalorizar = useRef<HTMLIonModalElement>(null);
  const manipulacion = useRef<HTMLIonModalElement>(null);
  const abusoEco = useRef<HTMLIonModalElement>(null);
  const privMasc = useRef<HTMLIonModalElement>(null);

  return (
    <IonPage>
      
      {/* With the condense property, the app header will stay on screen after srcolling down the page */}
      <IonHeader>
        <IonToolbar class="app-toolbar">
          <IonTitle class="ion-text-center screen-titles">TPC ❤️</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        <IonTitle class="ion-text-center screen-h2" color="light">Pendiente a...</IonTitle>

        {/* Here goes the body containing the cards */}
        <IonGrid>
          <IonRow>
            {/* Amenazas card */}
            <IonCol>
              <IonButton id="open-amenazas" color="light" expand="block">
                Amenazas
              </IonButton>
              <IonModal ref={amenazas} trigger="open-amenazas">
                <IonHeader>
                  <IonToolbar>
                    <IonTitle>Amenazas</IonTitle>
                    <IonButtons slot="end">
                      <IonButton color="light" onClick={() => amenazas.current?.dismiss()}>Cerrar</IonButton>
                    </IonButtons>
                  </IonToolbar>
                </IonHeader>
                <IonContent className="ion-padding">
                  <IonCard color="light">
                    <p>Asustarla con amenazas de hacerle mal.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Obligarla a retirar los cargos presentados contra él.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Obligarla a cometer actos ilegales.</p>
                  </IonCard>
                </IonContent>
              </IonModal>
            </IonCol>
            {/* Intimidacion card */}
            <IonCol>
              <IonButton id="open-intimidacion" color="light" expand="block" >
                Intimidación
              </IonButton>
              <IonModal ref={intimidacion} trigger="open-intimidacion">
                <IonHeader>
                  <IonToolbar>
                    <IonTitle>Intimidación</IonTitle>
                    <IonButtons slot="end">
                      <IonButton color="light" onClick={() => intimidacion.current?.dismiss()}>Cerrar</IonButton>
                    </IonButtons>
                  </IonToolbar>
                </IonHeader>
                <IonContent className="ion-padding">
                  <IonCard color="light">
                    <p>Provocándole miedo a través de sus miradas, acciones y gestos.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Destrozar objetos.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas.</p>
                  </IonCard>
                </IonContent>
              </IonModal>
            </IonCol>
          </IonRow>
          <IonRow>
            {/* Abuso emocional card */}
            <IonCol>
              <IonButton id="open-abuso-emocional" color="light" expand="block">
                Abuso Emocional
              </IonButton>
              <IonModal ref={abusoEmo} trigger="open-abuso-emocional">
                <IonHeader>
                  <IonToolbar>
                    <IonTitle>Abuso Emocional</IonTitle>
                    <IonButtons slot="end">
                      <IonButton color="light" onClick={() => abusoEmo.current?.dismiss()}>Cerrar</IonButton>
                    </IonButtons>
                  </IonToolbar>
                </IonHeader>
                <IonContent className="ion-padding">
                  <IonCard color="light">
                    <p>Hacerla sentir inferior.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Hacerla sentir mal.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Insultarle con nombres ofensivos.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Hacerla pensar que está loca.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Confundirla a propósito.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Humillarla.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Hacerla sentir culpable.</p>
                  </IonCard>
                </IonContent>
              </IonModal>
            </IonCol>
            {/* Aislamiento card */}
            <IonCol>
              <IonButton id="open-aislamiento" color="light" expand="block">
                Aislamiento
              </IonButton>
              <IonModal ref={aislamiento} trigger="open-aislamiento">
                <IonHeader>
                  <IonToolbar>
                    <IonTitle>Aislamiento</IonTitle>
                    <IonButtons slot="end">
                      <IonButton color="light" onClick={() => aislamiento.current?.dismiss()}>Cerrar</IonButton>
                    </IonButtons>
                  </IonToolbar>
                </IonHeader>
                <IonContent className="ion-padding">
                  <IonCard color="light">
                    <p>Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Limitarle su vida social utilizando los celos para justificar sus actos</p>
                  </IonCard>
                </IonContent>
              </IonModal>
            </IonCol>
          </IonRow>
          <IonRow>
            {/* Desvalorizar card */}
            <IonCol>
              <IonButton id="open-des-neg-cul" color="light" expand="block">
                Desvalorizar, Negar, Culpar
              </IonButton>
              <IonModal ref={desvalorizar} trigger="open-des-neg-cul">
                <IonHeader>
                  <IonToolbar>
                    <IonTitle>Desvalorizar, Negar, Culpar</IonTitle>
                    <IonButtons slot="end">
                      <IonButton color="light" onClick={() => desvalorizar.current?.dismiss()}>Cerrar</IonButton>
                    </IonButtons>
                  </IonToolbar>
                </IonHeader>
                <IonContent className="ion-padding">
                  <IonCard color="light">
                    <p>No tomar seriamente preocupación que ella tiene sobre el abuso.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Negar que uso hacerla sentir responsable de la conducta abusiva.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Decirle que ella lo provocó.</p>
                  </IonCard>
                </IonContent>
              </IonModal>
            </IonCol>
            {/* Manipulacion card */}
            <IonCol>
              <IonButton id="open-manipulacion" color="light" expand="block">
                Manipulación de los Niño(a)s
              </IonButton>
              <IonModal ref={manipulacion} trigger="open-manipulacion">
                <IonHeader>
                  <IonToolbar>
                    <IonTitle>Manipulación de los Niño(a)s</IonTitle>
                    <IonButtons slot="end">
                      <IonButton color="light" onClick={() => manipulacion.current?.dismiss()}>Cerrar</IonButton>
                    </IonButtons>
                  </IonToolbar>
                </IonHeader>
                <IonContent className="ion-padding">
                  <IonCard color="light">
                    <p>Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Usar las visitas con los niño(a)s para molestarla o amenazarla.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Amenazarla con quitarle los niño(a)s.</p>
                  </IonCard>
                </IonContent>
              </IonModal>
            </IonCol>
          </IonRow>
          <IonRow>
            {/* Abuso economico card */}
            <IonCol>
              <IonButton id="open-abuso-economico" color="light" expand="block">
                Abuso Económico
              </IonButton>
              <IonModal ref={abusoEco} trigger="open-abuso-economico">
                <IonHeader>
                  <IonToolbar>
                    <IonTitle>Abuso Económico</IonTitle>
                    <IonButtons slot="end">
                      <IonButton color="light" onClick={() => abusoEco.current?.dismiss()}>Cerrar</IonButton>
                    </IonButtons>
                  </IonToolbar>
                </IonHeader>
                <IonContent className="ion-padding">
                  <IonCard color="light">
                    <p>No dejarla trabajar o impedirle que mantenga su empleo.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Obligarala a que le pida dinero.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Darle una mensualidad.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Quitarle el dinero.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos.</p>
                  </IonCard>
                </IonContent>
              </IonModal>
            </IonCol>
            {/* Privilegio masculino card */}
            <IonCol>
              <IonButton id="open-priv-masculino" color="light" expand="block">
                Privilegio Masculino
              </IonButton>
              <IonModal ref={privMasc} trigger="open-priv-masculino">
                <IonHeader>
                  <IonToolbar>
                    <IonTitle>Privilegio Masculino</IonTitle>
                    <IonButtons slot="end">
                      <IonButton color="light" onClick={() => privMasc.current?.dismiss()}>Cerrar</IonButton>
                    </IonButtons>
                  </IonToolbar>
                </IonHeader>
                <IonContent className="ion-padding">
                  <IonCard color="light">
                    <p>Tratarla como una sirvienta.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>No dejarla tomar decisiones importantes.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Actuar como el rey de la casa.</p>
                  </IonCard>
                  <IonCard color="light">
                    <p>Definir las partes del hombre y de la mujer.</p>
                  </IonCard>
                </IonContent>
              </IonModal>
            </IonCol>
          </IonRow>
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};

export default Flag;