"use client";

import { BAFormElement, BAPera, formElement } from "basuite";
import { useState } from "react";

export default function Playground() {
  const [model, setModel] = useState({
    inputField: "Sample Text",
    firstName: "Muhammad",
    lastName: "Ahmed",
    cnic: "4210119738169",
    password: "123456",
    email: "",
    datePickerField: "2025-01-01",
    selectField: 1,
    radioField: "female",
    checkboxField: false,
    booleanField: false,
    textareaField: "Sample Text",
    buttonField: undefined,
    customBodyField: undefined,
    headingField: "Sample Text",
    textField: "Sample Text",
    dragFileField: null,
    imageUploadField: null,
  });

  const elem: formElement[] = [
    { elementType: "input", col: 4, key: "firstName", label: "First Name" },
    { elementType: "input", col: 4, key: "lastName", label: "Last Name" },
    {
      elementType: "input",
      col: 4,
      key: "cnic",
      label: "CNIC",
      inputType: "maskinput",
      mask: "#####-#######-#"
    },
    {
      elementType: "input",
      col: 4,
      key: "email",
      label: "Email",
      inputType: "emailinput"
    },
    {
      elementType: "input",
      col: 4,
      key: "password",
      label: "Password",
      inputType: "passwordinput"
    },
    {
      elementType: "datepicker",
      col: 4,
      key: "datePickerField",
      label: "Date Picker"
    },
    {
      elementType: "select",
      col: 4,
      key: "selectField",
      label: "Select Field",
      showSearch: true,
      options: [
        { label: "Opt 1", value: 1 },
        { label: "Opt 2", value: 2 },
        { label: "Opt 3", value: 3 }
      ]
    },
    {
      elementType: "radio",
      col: 4,
      key: "radioField",
      label: "Radio Field",
      options: [
        { label: "Female", value: "female" },
        { label: "Male", value: "male" }
      ]
    },
    { elementType: "checkbox", col: 4, key: "checkboxField", label: "Checkbox Field" },
    { elementType: "boolean", col: 4, key: "booleanField", label: "Boolean Field" },
    { elementType: "textarea", col: 4, key: "textareaField", label: "Textarea Field" },
    { elementType: "button", col: 4, key: "buttonField", label: "Button Field" },
    {
      elementType: "custombody",
      col: 4,
      key: "customBodyField",
      label: "Custom Body",
      body: <BAPera>Custom Body</BAPera>
    },
    { elementType: "heading", col: 4, key: "headingField", label: "Heading" },
    { elementType: "text", col: 4, key: "textField", label: "Text Block" }
  ];

  return (
    <BAFormElement
      model={model}
      setModel={setModel}
      formElement={elem}
      saveButtonLabel="Register"
      saveButtonAlignment="start"
    />
  );
}