import { useState, useEffect } from 'react';
import { IonPage, IonTitle, IonContent, IonList, IonItemDivider, IonToolbar, IonInput, IonGrid, IonRow, IonCol, IonItem, IonText, IonButton, IonFab, IonFabButton, IonModal } from '@ionic/react';

const Todo = () => {

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

  function deleteTodo(index) {
    const todoItemsClone = Object.create(todoItems, []);

    todoItemsClone.splice(index,1);
    updateTodoItems(todoItemsClone);
  }

function submitTodo() {
  const listOfTodosClone = Object.create(todoItems, []);
  const newTodoItem = {title: newTodo};

  listOfTodosClone.push(newTodoItem);
  updateTodoItems(listOfTodosClone);
  updateNewTodo('');
  setShowModal(false);
}
  
  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>
        <IonModal isOpen={showModal}>
        <p>This is modal content</p>
        <IonList>
          <IonItem>
            <IonInput value={newTodo} placeholder="Enter Todo Item" onIonChange={e => updateNewTodo(e.detail.value)}></IonInput>
          </IonItem>
        </IonList>
      <IonButton onClick={submitTodo}>Add todo</IonButton>
      <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>    </IonModal>
        <IonFab slot="fixed" vertical="bottom" horizontal="end">
          <IonFabButton onClick={()=>setShowModal(true)}></IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );
};

export default Todo;