"use client";
import React from "react";
import { Form, FormikProps } from "formik";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { ConfigFormValues, ConfigListFormProps } from "./ConfigsForm";

export default function InnerConfigListForm(
  props: FormikProps<ConfigFormValues> & ConfigListFormProps
) {
  const { values, setFieldValue } = props;

  console.log(values.configs)
  return (
    <Form className="space-y-4">
      {values.configs?.length && values?.configs?.map((config, index) => (
        <div
          key={config.key}
          className="border p-4 rounded-md bg-white space-y-3"
        >
          <Field>
            <FieldLabel>Key</FieldLabel>
            <Input value={config.key} disabled />
          </Field>

          <Field>
            <FieldLabel>Value</FieldLabel>
            <Input
              value={config.value}
              onChange={(e) =>
                setFieldValue(
                  `configs.${index}.value`,
                  e.target.value
                )
              }
            />
          </Field>

          <Field>
            <FieldLabel>Description</FieldLabel>
            <Textarea
              value={config.description || ""}
              onChange={(e) =>
                setFieldValue(
                  `configs.${index}.description`,
                  e.target.value
                )
              }
            />
          </Field>
        </div>
      ))}

      <Button type="submit" className="w-full">
        ذخیره تنظیمات
      </Button>
    </Form>
  );
}
