import { Modal } from "flowbite-react";
import { FC } from "react";
type Props = {
  changes: any;
  isOpen?: boolean;
  setOpen?: (x: boolean) => void;
  updated_at?: string;
};

const MonitoringChanges: FC<Props> = ({
  changes,
  isOpen,
  setOpen = () => {},
  updated_at = undefined,
}) => {
  console.log(changes.old);
  const transformValue = (value: any) => {
    return value;
  };
  const transformKey = (keys: any) => {
    return keys
      .split("_") // Split the string by underscores
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
      .join(" ");
  };
  return (
    <Modal
      onClose={() => setOpen(false)}
      show={isOpen}
      size="4xl"
      className="py-6"
    >
      <Modal.Header className="border-b-0 px-4 pb-0">
        <h1 className="text-center">Change Log</h1>
      </Modal.Header>
      <Modal.Body className="">
        <div className="flex gap-6 pb-6">
          <div className="w-full">
            <p className="font-bold text-left capitalize mb-2">
              Original Values:
            </p>
            <div className="border p-3 rounded-md border-green-800">
              {changes?.old &&
                Object.entries(changes?.old)?.map(([key, value], idx) => (
                  <p key={idx} className="text-left mt-2">
                    {transformKey(key)} : {transformValue(value)}
                  </p>
                ))}
              {changes?.old === undefined && (
                <>
                  <p>Created!</p>
                  <p>{updated_at && updated_at}</p>
                </>
              )}
            </div>
          </div>
          <div className="w-full">
            <p className="font-bold text-left capitalize mb-2">
              Update Values:
            </p>
            <div className="border p-3 rounded-md border-red-800">
              {changes?.attributes &&
                Object.entries(changes?.attributes)?.map(
                  ([key, value], idx) => (
                    <p key={idx} className="mt-2 text-left">
                      {transformKey(key)} : {transformValue(value)}
                    </p>
                  )
                )}
              {changes?.attributes == undefined && (
                <>
                  <p>Deleted!</p>
                  <p>{updated_at && updated_at}</p>
                </>
              )}
            </div>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
};

export default MonitoringChanges;