"use client";
import { useState } from "react";
import { Field, SelectField, TextareaField } from "@/components/shared/field";
import { Button } from "@/components/ui/button";
import { validateChargepoint, type Chargepoint } from "./model";
const locations = [
  "Sarinah Thamrin",
  "Grand Indonesia",
  "Summarecon Mall Bekasi",
  "Trans Studio Bandung",
];
export function ChargepointEditor({
  point,
  points,
  onSave,
  onCancel,
}: {
  point: Chargepoint;
  points: readonly Chargepoint[];
  onSave: (point: Chargepoint) => void;
  onCancel: () => void;
}) {
  const [draft, setDraft] = useState(point),
    [error, setError] = useState("");
  function change(key: keyof Chargepoint, value: string | number) {
    setDraft((p) => ({ ...p, [key]: value }));
  }
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const issue = validateChargepoint(draft, points);
        if (issue) {
          setError(issue);
          return;
        }
        onSave(draft);
      }}
    >
      <div className="mb-5 grid gap-4 sm:grid-cols-2">
        <Field
          label="Name"
          required
          value={draft.name}
          onChange={(e) => change("name", e.target.value)}
        />
        <SelectField
          label="Location"
          value={draft.location}
          options={locations}
          onChange={(e) =>
            setDraft({
              ...draft,
              location: e.target.value,
              locationId: `loc-00${locations.indexOf(e.target.value) + 1}`,
            })
          }
        />
        <Field
          label="Static Endpoint"
          required
          value={draft.endpoint}
          onChange={(e) => change("endpoint", e.target.value)}
        />
        <SelectField
          label="Protocol"
          options={["OCPP 1.6", "OCPP 2.0.1"]}
          value={draft.protocol}
          onChange={(e) => change("protocol", e.target.value)}
        />
        <SelectField
          label="Status"
          options={["Active", "Inactive"]}
          value={draft.status}
          onChange={(e) => change("status", e.target.value)}
        />
        <SelectField
          label="Visibility"
          options={["Public", "Private"]}
          value={draft.visibility}
          onChange={(e) => change("visibility", e.target.value)}
        />
        <Field
          label="Manufacturer"
          value={draft.vendor}
          onChange={(e) => change("vendor", e.target.value)}
        />
        <Field
          label="Model"
          value={draft.model}
          onChange={(e) => change("model", e.target.value)}
        />
        <Field
          label="CP Serial Number"
          value={draft.serial}
          onChange={(e) => change("serial", e.target.value)}
        />
        <Field
          label="Power (kW)"
          type="number"
          required
          min="0.1"
          max="1000"
          step="0.1"
          value={draft.power}
          onChange={(e) => change("power", e.target.valueAsNumber)}
        />
        <TextareaField
          label="Description"
          value={draft.description}
          onChange={(e) => change("description", e.target.value)}
        />
      </div>
      {error && (
        <p role="alert" className="mb-4 text-destructive">
          {error}
        </p>
      )}
      <div className="flex justify-end gap-2">
        <Button type="button" variant="outline" onClick={onCancel}>
          Cancel
        </Button>
        <Button>Save Preview</Button>
      </div>
    </form>
  );
}