import { TypedField, FieldType } from "react-declarative";

export const fields: TypedField[] = [
  {
    type: FieldType.Paper,
    fieldBottomMargin: "1",
    fields: [
      {
        type: FieldType.Typography,
        typoVariant: "h6",
        placeholder: "Custom JSX",
      },
      {
        type: FieldType.Component,
        desktopColumns: "4",
        tabletColumns: "6",
        phoneColumns: "12",
        name: "input",
        element: ({ value, onValueChange }) => (
          <input
            value={value}
            placeholder="debounced"
            onChange={({ target }) => onValueChange(target.value)}
          />
        ),
      },
      {
        type: FieldType.Component,
        desktopColumns: "4",
        tabletColumns: "6",
        phoneColumns: "12",
        name: "input",
        element: ({ input, onChange }) => (
          <input
            value={input}
            placeholder="direct"
            onChange={({ target }) => onChange({ input: target.value })}
          />
        ),
      },
      {
        type: FieldType.Component,
        element: (params) => <pre>{JSON.stringify(params, null, 2)}</pre>,
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "6",
        phoneColumns: "12",
        name: "input",
        title: "",
        placeholder: "input",
      },
    ],
  },
];