import { useState, useEffect } from 'react';
import { IonPage, IonTitle, IonContent, IonToolbar, IonGrid, IonRow, IonCol, IonItem, IonText, IonButton } from '@ionic/react';

const Todo = () => {

  const [todoItems, updateTodoItems] = useState([{ title: 'Get groceries'}, {title: 'Fill up on gas' }]);

  function deleteTodo(index) {
    const todoItemsClone = Object.create(todoItems, []);
    todoItemsClone.splice(index,1);
    console.log(todoItems);
    updateTodoItems(todoItemsClone);
  }
  
  return (
    <IonPage>
      <IonToolbar>
         <IonTitle>Todo App</IonTitle>
       </IonToolbar>
      <IonContent>
        <IonGrid>
          {todoItems.map((todoItem, index) => (
            <IonRow>
              <IonCol size="12">
                <IonItem>
                  <IonGrid>
                    <IonRow>
                      <IonCol size-xs="8.5" size-sm="8.5" size-md="10" size-lg="11"  class="ion-align-self-center">
                        <IonText>{todoItem.title}</IonText>
                      </IonCol>
                      <IonCol size-xs="3.5" size-sm="3.5" size-md="2" size-lg="1" class="ion-text-right">
                        <IonButton onClick={() => deleteTodo(index)}>Delete</IonButton>
                    </IonCol>
                    </IonRow>
                  </IonGrid>
                </IonItem>
              </IonCol>
            </IonRow>
          ))}
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};

export default Todo;