'use client';

import type { Props } from './types';
import { mapFieldTypeElement } from '@/config/elements';
import { useFormStore } from '@/store/ius/form';
import { useEffect } from 'react';
import { ElementContainer } from 'ui';

export function Elements({ data, metaData }: Props) {
  const { init, setValue, values } = useFormStore();

  useEffect(() => {
    init(data);
  }, [data, init]);

  return (
    <div className="mt-2 grid auto-rows-auto grid-cols-1 gap-2 gap-x-4 md:grid-cols-2 lg:grid-cols-3">
      {Object.keys(metaData).map((name) => {
        const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];

        if (!visible) return false;

        const Element = mapFieldTypeElement[fieldType];

        return (
          <ElementContainer key={name} id={name} title={fieldType === 'CHECKBOX' ? '' : label}>
            <Element
              id={name}
              value={values[name]}
              title={label}
              min={min}
              max={max}
              onChange={(e) => {
                setValue({ name, value: e.target.value });
              }}
              {...props}
            />
          </ElementContainer>
        );
      })}
    </div>
  );
}
