airboardgame/src/gameComponents/forms/BagFormFields.jsx

import React from "react";
import { useTranslation } from "react-i18next";
import { Field } from "react-final-form";

import Label from "../../ui/formUtils/Label";
import { ImageField } from "../../mediaLibrary";

import Hint from "../../ui/formUtils/Hint";
import ColorPicker from "../../ui/formUtils/ColorPicker";

import ActionList from "../ActionList";

const interactions = ["reveal", "hide", "revealSelf", "stack"];

const Form = ({ initialValues }) => {
  const { t } = useTranslation();

  return (
    <>
      <Label>
        {t("Accepted families")}
        <Field
          name="families"
          component="input"
          format={(val) => val && val.join(",")}
          parse={(val) => val && val.split(",").map((v) => v.trim())}
          initialValue={initialValues.families || []}
        />
        <Hint>
          {t(
            "Let this field empty to accept all items, " +
              "or set a comma separated list of families that will be accepted by the bag."
          )}
        </Hint>
      </Label>
      <Label>
        {t("Label")}
        <Field
          name="label"
          component="input"
          initialValue={initialValues.label}
        />
      </Label>
      <Label>
        {t("Label position")}
        <Field
          name="labelPosition"
          component="select"
          initialValue={initialValues.labelPosition || "left"}
          style={{ width: "10em" }}
        >
          <option value="left">{t("Left")}</option>
          <option value="top">{t("Top")}</option>
        </Field>
      </Label>
      <Label>
        {t("Label background color")}
        <Field
          name="labelBackgroundColor"
          component="input"
          initialValue={initialValues.labelBackgroundColor || "#CCCCCC33"}
        >
          {({ input: { onChange, value } }) => (
            <ColorPicker
              value={value}
              onChange={onChange}
              disableAlpha={false}
            />
          )}
        </Field>
      </Label>
      <Label>
        {t("Width")}
        <Field
          name="width"
          component="input"
          initialValue={initialValues.width}
        >
          {(props) => <input {...props.input} type="number" />}
        </Field>
      </Label>
      <Label>
        {t("Height")}
        <Field
          name="height"
          component="input"
          initialValue={initialValues.height}
        >
          {(props) => <input {...props.input} type="number" />}
        </Field>
      </Label>
      <Label>
        {t("Empty bag image")}
        <Field name="emptyBagImage" initialValue={initialValues.emptyBagImage}>
          {({ input: { value, onChange } }) => {
            return <ImageField value={value} onChange={onChange} />;
          }}
        </Field>
      </Label>
      <Label>
        {t("Full bag image")}
        <Field name="bagImage" initialValue={initialValues.bagImage}>
          {({ input: { value, onChange } }) => {
            return <ImageField value={value} onChange={onChange} />;
          }}
        </Field>
      </Label>
      
      <Label>
        {t("Counter visible")}
        <Field
          name="countervisible"
          component="input"
          type="checkbox"
          initialValue={initialValues.countervisible}
        />
        <Hint>{t("Check it to make bag counter visible")}</Hint>
      </Label>
      <Label>
        {t("Counter size")}
        <Field
          name="countersize"
          component="input"
          initialValue={initialValues.countersize}
        >
          {(props) => <input {...props.input} type="number" />}
        </Field>
      </Label>


      
    </>
  );
};

export default Form;