import { Box, Button, Divider, Heading } from "@chakra-ui/react";
import React from "react";
import FormField from "./FormField";
import { OPACITY_ON_LOAD } from "../Layout/animations";
import { ArrowBackIcon } from "@chakra-ui/icons";

const FormInputMain = ({
  groupedFields,
  control,
  errors,
  onSubmit,
  children,
  onCancle, 
  submitTitle,
  p,
  w
}) => {
  return (
    <form onSubmit={onSubmit}>
      {Object.entries(groupedFields).map(([section, fields], index) => (
        <Box key={section} mt={4} >
          <Heading as="h6" size="xs" mx={5} fontWeight={'500'}>
            {/* <ArrowBackIcon fontSize={'lg'} />  */}
            {section}
          </Heading>
          <Box display={"flex"} gap={0}>
            <Box
              width={"100%"}
              p={p?p:5}
              display={"flex"}
              flexWrap={"wrap"}
              gap={4}
            >
              {fields.map(
                (
                  {
                    label,
                    name,
                    id,
                    arabic,
                    type,
                    isRequired,
                    selectedImageData,
                    setSelectedImageData,
                    imageData,
                    handleImageChange,
                    removeImage,
                    placeHolder,
                    options,
                    helperText,
                    multiple,
                    width
                  },
                  key
                ) => (
                  <FormField
                    id={id}
                    key={key}
                    label={label}
                    type={type}
                    name={name}
                    helperText={helperText ? helperText : undefined}
                    options={options ? options : undefined}
                    placeHolder={placeHolder ? placeHolder : undefined}
                    control={control}
                    errors={errors}
                    multiple={multiple}
                    isRequired={isRequired}
                    arabic={arabic}
                    selectedImageData={selectedImageData}
                    setSelectedImageData={setSelectedImageData}
                    imageData={imageData}
                    handleImageChange={handleImageChange}
                    removeImage={removeImage}
                    width={width}
                  />
                )
              )}
            </Box>
          </Box>
          {index < Object.entries(groupedFields).length - 1 && <Divider />}
        </Box>
      ))}

      {children}
      
      <Box display={'flex'} justifyContent={'end'} mb={5}>
        <Box display={"flex"} justifyContent={"end"} p={2} w={'49%'} gap={4}>
          {onCancle && <Button
            size={"sm"}
            width={w?w:"44.5%"}
            rounded={"sm"}
            type="submit"
            colorScheme='gray'
            onClick={onCancle}
          >
            Cancel
          </Button>}
          <Button
            size={"sm"}
            width={w?w:"44.5%"}
            rounded={"sm"}
            type="submit"
            colorScheme="green"
          >
            {submitTitle ? submitTitle : "Submit"}
          </Button>
        </Box>
      </Box>
    </form>
  );
};

export default FormInputMain;