Untitled

"use client"

import React from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';

const initialValues = {
  width: 200,
  height: 200,
  margin: 0,
  image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Sign-check-icon.png/768px-Sign-check-icon.png",
  dotsOptions: {
    type: "square",
    color: "#000000",
    gradient: {
      type: "linear",
      rotation: 0,
      colorStops: [
        { offset: 0, color: "#000000" },
        { offset: 1, color: "#000000" },
      ],
    },
  }
};

const Test = () => {
  const handleToggleGradient = (values, setFieldValue) => {
    const hasGradient = !!values.dotsOptions.gradient;
    if (hasGradient) {
      // Remove gradient
      setFieldValue("dotsOptions.gradient", null);
    } else {
      // Add gradient
      setFieldValue("dotsOptions.gradient", {
        type: "linear",
        rotation: 0,
        colorStops: [
          { offset: 0, color: "#000000" },
          { offset: 1, color: "#000000" },
        ],
      });
    }
  };

  const handleSubmit = (values) => {
    // Your form submission logic here
    console.log(values);
  };

  return (
    <div>
      <h1>Form with Formik</h1>
      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
        {({ values, setFieldValue }) => (
          <Form  className='border border-green-200 p-5 rounded-lg'>
         <div>
              <label>
                Width:
                <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="number" name="width" />
              </label>
            </div>
            <div>
              <label>
                Height:
                <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="number" name="height" />
              </label>
            </div>
            <div>
              <label>
                Margin:
                <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="number" name="margin" />
              </label>
            </div>
            <div>
              <label>
                Image URL:
                <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="text" name="image" />
              </label>
            </div>
            <div>
              <label>
                Dots Type:
                <Field className="px-2 py-1 border border-gray-300 rounded-lg" as="select" name="dotsOptions.type">
                  <option value="square">Square</option>
                  <option value="circle">Circle</option>
                </Field>
              </label>
            </div>
            <div>
              <label>
                Dots Color:
                <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="color" name="dotsOptions.color" />
              </label>
            </div>
          
            <div>
              <label>
                Gradient:
                <input
                  type="checkbox"
                  checked={!!values.dotsOptions.gradient}
                  onChange={() => handleToggleGradient(values, setFieldValue)}
                />
              </label>
            </div>
            {values.dotsOptions.gradient && (
              <div>
                <h2>Gradient Configuration</h2>
                <div>
                  <label>
                    Gradient Type:
                    <Field className="px-2 py-1 border border-gray-300 rounded-lg" as="select" name="dotsOptions.gradient.type">
                      <option value="linear">Linear</option>
                      <option value="radial">Radial</option>
                    </Field>
                  </label>
                </div>
                <div>
                  <h3>Color Stops</h3>
                  <Field className="px-2 py-1 border border-gray-300 rounded-lg" Array name="dotsOptions.gradient.colorStops">
                    {arrayHelpers => (
                      <div>
                        {values.dotsOptions.gradient.colorStops.map((colorStop, index) => (
                          <div key={index}>
                            <label>
                              Offset:
                              <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="number" name={`dotsOptions.gradient.colorStops.${index}.offset`} />
                            </label>
                            <label>
                              Color:
                              <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="color" name={`dotsOptions.gradient.colorStops.${index}.color`} />
                            </label>
                            
                          </div>
                        ))}
                       
                      </div>
                    )}
                  </Field>
                </div>
              </div>
            )}
            <button className='btn btn-primary' type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default Test;