import { useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import orders, { getOrdersSummaryData } from '../../data/orders';
import classes from './OrdersSummary.module.css';

function OrdersSummary() {
  const orderIdInputRef = useRef();
  const navigate = useNavigate();

  const { quantity, total } = getOrdersSummaryData();

  function findOrderHandler(event) {
    event.preventDefault();
    const orderId = orderIdInputRef.current.value;
    const orderExists = orders.some((order) => order.id === orderId);

    if (!orderExists) {
      alert('Nie znaleziono zamówienia o podanym identyfikatorze.');
      return;
    }

    navigate(`/orders/${orderId}`);
  }

  return (
    <div className={classes.row}>
      <p className={classes.summary}>
        {total.toFixed(2)} zł | Liczba zamówień: {orders.length}  | Liczba produktów: {quantity}
      </p>
      <form className={classes.form} onSubmit={findOrderHandler}>
        <input
          type="text"
          placeholder="Wprowadź id zamówienia"
          aria-label="Znajdź zamówienie na podstawie identyfikatora."
          ref={orderIdInputRef}
        />
        <button>Znajdź</button>
      </form>
    </div>
  );
}

export default OrdersSummary;
