import { useSortable } from "@dnd-kit/sortable";
import { Arrow } from "../../assets/icons/Arrow";
import { Handle } from "../../assets/icons/Handle";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { CSS } from "@dnd-kit/utilities";
import { Trash } from "lucide-react";

interface SingleFormProps {
  hasArrow?: boolean;
  style?: React.CSSProperties;
  id: string;
  onRemove: (id: string) => void;
  removeEnabled?: boolean;
}

const SingleForm = ({
  hasArrow = true,
  style: containerStyle,
  id,
  onRemove,
  removeEnabled = true,
  ...props
}: SingleFormProps) => {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id });

  const onRemoveClick = () => onRemove(id);

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <div
      className="flex flex-col mt-4 bg-white"
      ref={setNodeRef}
      style={{
        ...containerStyle,
        ...style,
        borderBottomWidth: 1,
        borderBottomColor: "#E2E8F0",
      }}
      {...attributes}
    >
      {hasArrow && <Arrow className="self-center mb-4" />}

      <div className="flex flex-row">
        <Handle className="mr-6 self-center" {...listeners} />

        <div className="flex flex-col w-full pr-2">
          {removeEnabled && (
            <Trash className="self-end mb-4 z-50" onClick={onRemoveClick} />
          )}

          <div className="flex flex-row justify-between items-center mb-11">
            <Input className="h-12 font-semibold text-2xl" />
            <div className="mr-2 ml-2 font-semibold size text-2xl">-</div>
            <Input className="h-12 font-semibold text-2xl" />
          </div>

          <div className="flex flex-row justify-between mb-6">
            <div className="flex flex-col flex-1">
              <Label htmlFor="ПРЕВОЗНИК" className="mb-2 text-sm	font-medium	">
                ПРЕВОЗНИК
              </Label>
              <Input className="h-9 mb-3" />

              <Label htmlFor="Адреса" className="mb-2 text-sm	font-medium	">
                Адреса
              </Label>
              <Input className="h-9 mb-3" />

              <Label htmlFor="ПИБ" className="mb-2 text-sm	font-medium	">
                ПИБ
              </Label>
              <Input className="h-9 mb-3" />
            </div>
            <div className="w-7" />
            <div className="flex flex-col flex-1">
              <Label htmlFor="Возач" className="mb-2 text-sm	font-medium	">
                Возач
              </Label>
              <Input className="h-9 mb-3" />

              <Label
                htmlFor="Регистарски број возила"
                className="mb-2 text-sm	font-medium	"
              >
                Регистарски број возила
              </Label>
              <Input className="h-9 mb-3" />

              <Label htmlFor="Имејл" className="mb-2 text-sm	font-medium	">
                Имејл
              </Label>
              <Input className="h-9 mb-3" />

              <Label htmlFor="Telefon" className="mb-2 text-sm	font-medium	">
                Telefon
              </Label>
              <Input className="h-9 mb-3" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SingleForm;