add-routes-component.tsx

'use client';
import { type WorkTime, type Routes, Prisma } from '@prisma/client';
import { useEffect, useState } from 'react';

import Button from './button';
import { set } from 'date-fns';

interface shiftsType {
  name: string;
  startTime: string;
  endTime: string;
}

export const AddRouteComponent = ({}: {}) => {
  const initialFormData: Routes = {
    id: '',
    routeNiceName: '',
    organizationID: '',
    routeIDFromPostOffice: '',
    assocTrucks: '',
    routeIDRandomGen: null,
    dateRouteAcquired: new Date(),
    dateAddedToCB: new Date(),
    currentTruckForRoute: '',
    allocatedShifts: null,
    img: '',
  };

  const [formData, setFormData] = useState<Routes>(initialFormData);

  const [shifts, setShifts] = useState<shiftsType[]>(
    formData.allocatedShifts ? [] : [],
  );
  const addRoute = async (newRoute: Routes) => {
    try {
      const response = await fetch('/api/add-new-route', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newRoute),
      });

      if (response.ok) {
        // Work time updated successfully
        console.log('Work time updated successfully');
        // Clear form data
        setFormData(initialFormData);
        setShifts([]);
        return 'Has updated';
      } else {
        // Error occurred while updating work time
        console.error('Error updating work time');
      }
    } catch (error) {
      console.error('Error updating work time', error);
    }
  };

  const [shiftName, setShiftName] = useState<string>('');
  const [shiftStartTime, setShiftStartTime] = useState<string>('');
  const [shiftEndTime, setShiftEndTime] = useState<string>('');

  const updateAllocatedShifts = (newShifts: any) => {
    setFormData((prevFormData) => ({
      ...prevFormData,
      allocatedShifts: newShifts,
    }));
    console.log(35, formData.allocatedShifts);
  };

  const addShift = () => {
    if (shiftName.trim() !== '' && shiftStartTime !== '') {
      const newShift = {
        name: shiftName.trim(),
        startTime: shiftStartTime,
        endTime: shiftEndTime,
      };
      const updatedShifts = formData.allocatedShifts
        ? [...(formData.allocatedShifts as unknown as shiftsType[]), newShift]
        : [newShift];
      updateAllocatedShifts(updatedShifts);
      setShifts(updatedShifts); // Update shifts state with updatedShifts
      setShiftName('');
      setShiftStartTime('');
      setShiftEndTime('');
    }
  };

  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setShiftName(e.target.value);
  };
  const handleStartTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setShiftStartTime(e.target.value);
    console.log(39, e.target.value);
  };

  const handleEndTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setShiftEndTime(e.target.value);
  };

  return (
    <div>
      <div className="space-y-7">
        <p>Route name:</p>
        <input
          type="text"
          value={formData.routeNiceName}
          className="text-gray-900"
          onChange={(e) =>
            setFormData({ ...formData, routeNiceName: e.target.value })
          }
          min="1"
          max="31"
        />

        <p>Route ID from Post Office:</p>
        <input
          type="text"
          className="text-gray-900"
          value={formData.routeIDFromPostOffice}
          onChange={(e) =>
            setFormData({ ...formData, routeIDFromPostOffice: e.target.value })
          }
          min="1"
          max="31"
        />
        {/* Start Add Route Shifts */}

        <div>
          <h2 className="text-lg font-semibold">Add Route Shifts:</h2>
          <ul className="divide-y divide-gray-300 rounded border border-gray-300">
            {shifts.map((shift, index) => (
              <li
                key={index}
                className="flex items-center justify-between px-4 py-2"
              >
                <span>
                  {shift.name}: {shift.startTime} - {shift.endTime}
                </span>
                <button className="text-blue-500">Edit</button>
              </li>
            ))}
          </ul>

          <div className="mt-4">
            <input
              type="text"
              value={shiftName}
              onChange={handleNameInputChange}
              className="mr-2 rounded border border-gray-300 px-4 py-2 text-gray-600"
              placeholder="Shift Trip Name"
            />
            <input
              type="time"
              value={shiftStartTime}
              onChange={handleStartTimeChange}
              className="mr-2 rounded border border-gray-300 px-4 py-2 text-gray-600"
              placeholder="Start Time"
            />
            <input
              type="time"
              value={shiftEndTime}
              onChange={handleEndTimeChange}
              className="mr-2 rounded border border-gray-300 px-4 py-2 text-gray-600"
              placeholder="End Time"
            />
            <button
              onClick={addShift}
              className="rounded bg-blue-500 px-4 py-2 text-white"
            >
              Add Shift
            </button>
          </div>
        </div>

        {/*End Add Route Shifts  */}
        <div className="relative z-10 inline-block text-left">
          <Button
            onClick={() => {
              console.log(82, formData);
              addRoute({
                id: '',
                dateAddedToCB: new Date(),
                img: formData.img,
                organizationID: '',
                routeNiceName: formData.routeNiceName,
                routeIDFromPostOffice: formData.routeIDFromPostOffice,
                assocTrucks: '',
                routeIDRandomGen: null,
                dateRouteAcquired: new Date(),
                currentTruckForRoute: '',
                allocatedShifts: formData.allocatedShifts,
              });
            }}
            className="inline-flex w-full justify-center rounded-md bg-black/20 bg-blue-500 px-4 py-2 text-sm  font-medium text-white hover:bg-black/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
          >
            Add Route
          </Button>
        </div>
      </div>
    </div>
  );
};