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

function compatMetadata(metaData: Props['metaData']) {
  const { comment, ...meta } = metaData;
  comment.fieldType = 'TEXTAREA';

  return { ...meta, comment };
}

export function Elements({ data, metaData }: Props) {
  const { init, setValue, validation, 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(compatMetadata(metaData)).map((name) => {
        const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];

        if (!visible) return false;

        const Element = mapFieldTypeElement[fieldType];

        return (
          <ElementContainer
            classNameParent={fieldType === 'TEXTAREA' ? 'col-[span_3]' : undefined}
            intent={validation[name] ? 'danger' : 'default'}
            message={validation[name]?.message}
            key={name}
            id={name}
            title={label}
          >
            <Element
              loading={!Object.keys(values).length}
              checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
              id={name}
              value={values[name] || ''}
              min={min}
              max={max}
              onChange={(e) => {
                setValue({
                  name,
                  value: fieldType === 'CHECKBOX' ? e.target.checked : e.target.value,
                });
              }}
              {...props}
            />
          </ElementContainer>
        );
      })}
    </div>
  );
}