import { FC, useState } from 'react';
import { JobForm } from '../app/JobRecord/JobForm';
import { Job } from '../lib/sori';
import { formatDate } from '../utils';
import { Dialog } from './Dialog';

export const JobInfo: FC<{ job: Job }> = ({ job }) => {
  const [open, setOpen] = useState(false);

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const formatValue = (value: any) => {
    if (value instanceof Date) {
      return formatDate(value, 2);
    } else if (typeof value === 'object' && value !== null) {
      return null;
    } else {
      return String(value);
    }
  };

  return (
    <>
      <Dialog open={open} onRequestClose={() => setOpen(false)}>
        <JobForm job={job} onSubmit={() => {}} />
      </Dialog>
      <div className="h-full w-full flex flex-col p-2">
        <div className="h-auto w-full overflow-auto rounded-lg bg-white p-2 shadow-sm">
          <div className="mb-2 flex items-center justify-between">
            <h2 className="truncate text-lg font-bold">
              {job.title.toUpperCase()}
            </h2>
            <button
              onClick={() => setOpen(true)}
              className="rounded bg-blue-5 px-3 py-1 text-sm text-white hover:bg-blue-6"
            >
              Edit
            </button>
          </div>

          <div className="grid grid-cols-3 gap-2 text-sm">
            {Object.entries(job).map(([key, value]) => {
              const displayValue = formatValue(value);
              if (displayValue === null) return null;

              return (
                <div key={key} className="border rounded p-1">
                  <p className="text-xs text-gray-500 font-medium">
                    {key.toUpperCase()}
                  </p>
                  <p className="truncate" title={displayValue}>
                    {displayValue}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};
