import React, {useEffect, useState} from 'react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { X } from "lucide-react";
import EditableInput from '@/components/shared/EditableInput.jsx';

const PropertyTable = ({
  properties = [],
  onChange,
  propertyName = ''
}) => {
  const [localProperties, setLocalProperties] = useState(properties);

  useEffect(() => {
    setLocalProperties(properties);
  }, [properties]);

  // Handle property changes without causing infinite loops
  const handlePropertyChange = (index, field, value) => {
    const updatedProperties = localProperties.map((prop, i) => {
      if (i === index) {
        return { ...prop, [field]: value };
      }
      return prop;
    });
    setLocalProperties(updatedProperties);
    requestAnimationFrame(() => {
      onChange?.(updatedProperties);
    });
  };

  // Add new property
  const handleAdd = () => {
    const newProperty = {
      enabled: true,
      key: '',
      value: ''
    };
    const updatedProperties = [...localProperties, newProperty];
    setLocalProperties(updatedProperties);
    onChange?.(updatedProperties);
  };

  // Remove property
  const handleRemove = (index) => {
    const updatedProperties = localProperties.filter((_, i) => i !== index);
    setLocalProperties(updatedProperties);
    onChange?.(updatedProperties);
  };

  return (
      <div className="space-y-4">
        <div className="flex justify-between items-center">
          <h3 className="text-lg font-medium">{propertyName}</h3>

        </div>

        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-14">Enable</TableHead>
              <TableHead className="w-[40%]">Key</TableHead>
              <TableHead className="w-[40%]">Value</TableHead>
              <TableHead className="w-14">
                <Button
                    onClick={handleAdd}
                    variant="outline"
                    size="sm"
                    className="w-20"
                >
                  Add
                </Button>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {localProperties.map((property, index) => (
                <TableRow key={index}>
                  <TableCell className="">
                    <Checkbox
                        checked={property.enabled}
                        onCheckedChange={(checked) =>
                            handlePropertyChange(index, 'enabled', checked)
                        }
                    />
                  </TableCell>
                  <TableCell>
                    <EditableInput
                        value={property.key}
                        onChange={(value) =>
                          handlePropertyChange(index, 'key', value)
                        }
                        className="w-full"
                    />
                  </TableCell>
                  <TableCell>
                    <EditableInput
                        value={property.value}
                        onChange={(value) =>
                            handlePropertyChange(index, 'value',value)
                        }
                        className="w-full"
                    />
                  </TableCell>
                  <TableCell>
                    <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => handleRemove(index)}
                        className="h-8 w-8"
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </TableCell>
                </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
  );
};

export default PropertyTable;
