import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
import { mapFieldTypeElement } from '@/config/elements';
import { Background, Button, ElementContainer } from 'ui';

type Props = {
  readonly data: ResponseGetData;
  readonly metaData: ResponseMetaData;
};

export function Form({ data, metaData }: Props) {
  return (
    <Background>
      <div className="grid auto-rows-auto grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 ">
        {Object.keys(metaData).map((name) => {
          const { fieldType, visible } = metaData[name];

          if (!visible) return false;

          const Element = mapFieldTypeElement[fieldType];

          return (
            <ElementContainer
              key={name}
              id={name}
              title={fieldType === 'CHECKBOX' ? '' : metaData[name].label}
            >
              <Element
                id={name}
                required={metaData[name].required}
                defaultValue={data[name]}
                disabled={metaData[name].disabled}
                title={metaData[name].label}
              />
            </ElementContainer>
          );
        })}
      </div>
      <div className="grid grid-cols-1 gap-5 pt-3 lg:grid-cols-3">
        <Button>Сохранить</Button>
        <Button>Возврат на доработку</Button>
        <Button color="danger">Отмена</Button>
      </div>
    </Background>
  );
}