import { AttributeSchema, ProjectSchema } from "../../client";
import { UseFormReturnType } from "@mantine/form";
import { rem, Stack } from "@mantine/core";
import { ReactNode } from "react";
import CardAttributeField from "./components/CardAttributeField.tsx";
import { CardGeneralFormType } from "../../pages/CardsPage/drawers/CardEditDrawer/tabs/GeneralTab/GeneralTab.tsx";

type Props = {
    project: ProjectSchema;
    form: UseFormReturnType<CardGeneralFormType>;
}

const CardAttributeFields = ({ project, form }: Props) => {
    const attributes: AttributeSchema[] = [];

    project.attributes.forEach(attribute => {
        if (attribute.type.type === "boolean") {
            attributes.push(attribute);
        } else {
            attributes.unshift(attribute);
        }
    });

    const fields: ReactNode[] = attributes.map(attribute => {
        return (
            <CardAttributeField
                key={attribute.id}
                attribute={attribute}
                form={form}
            />
        );
    });

    return (
        <Stack gap={rem(10)}>
            {...fields}
        </Stack>
    );
};

export default CardAttributeFields;
