'use client';

import { DataModels } from '@5minds/processcube_engine_client';
import { startProcess } from './startProcessAction';

type TaskListProps = {
  taskList: Array<DataModels.FlowNodeInstances.UserTaskInstance>;
};

export default function TaskList(props: TaskListProps) {
  const { taskList } = props;

  const handleClick = (task: DataModels.FlowNodeInstances.UserTaskInstance) => {
    console.log('Task clicked: ', task);
  };

  return (
    <div className="mt-1">
      <div className="min-w-0 flex justify-between">
        <h2 className="text-2xl font-bold leading-7 text-white sm:truncate sm:text-3xl sm:tracking-tight">TaskList</h2>
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"
          onClick={() => startProcess()}
        >
          Start process
        </button>
      </div>
      <ul role="list" className="divide-y divide-white-800">
        {taskList.map((task) => (
          <li key={task.flowNodeInstanceId} className="flex justify-between gap-x-6 py-5">
            <div className="flex min-w-0 gap-x-4">
              <img className="h-12 w-12 flex-none rounded-full bg-gray-800" src={'./favicon.ico'} alt="" />
              <div className="min-w-0 flex flex-row space-x-5 ">
                <p className="mt-1 truncate text-xs leading-5 text-gray-400">Name: {task.flowNodeName}</p>
                <p className="mt-1 truncate text-xs leading-5 text-gray-400">ID: {task.flowNodeInstanceId}</p>
                <p className="mt-1 truncate text-xs leading-5 text-gray-400">
                  Erstellung:{' '}
                  {task.startedAt && (
                    <>
                      {new Date(task.startedAt).toLocaleString('de', {
                        dateStyle: 'short',
                        timeStyle: 'short',
                      })}
                    </>
                  )}
                </p>
              </div>
            </div>
            <div className="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
              <div className="mt-1 flex items-center gap-x-1.5">
                <div className="flex-none rounded-full bg-emerald-500/20 p-1"></div>
                <button
                  type="button"
                  className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
                  onClick={() => handleClick(task)}
                >
                  Log task
                </button>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}


Lädt...