import { Form, redirect, useLoaderData } from 'react-router-dom';

import Modal from '../components/Modal';
import { deleteTodo, getTodo, updateTodo } from '../data/todos';

function SelectedTodo() {
  const todo = useLoaderData();

  return (
    <Modal>
      <Form method="patch">
        <p>
          <label htmlFor="text">Zadanie</label>
          <input type="text" id="text" name="text" defaultValue={todo.text} />
        </p>
        <p className="form-actions">
          <button>Zmodyfikuj zadanie</button>
        </p>
      </Form>
      <Form method="delete">
        <p className="form-actions">
          <button className='btn-alt'>Usuń zadanie</button>
        </p>
      </Form>
    </Modal>
  );
}

export default SelectedTodo;

export async function loader({ params }) {
  return getTodo(params.id);
}

export async function action({ request, params }) {
  const todoId = params.id;

  if (request.method === 'PATCH') {
    const formData = await request.formData();
    const enteredText = formData.get('text');
    updateTodo(todoId, enteredText);
  }

  if (request.method === 'DELETE') {
    deleteTodo(todoId);
  }
  return redirect('/');
}
