import { Flex, Heading } from '@aws-amplify/ui-react';
import { createCreateRecordComponent, createDetailComponent, createEditComp, createGetRecordComponent, createListComponent, createViewComp } from './CRUDLComponents';

type DeepPartial<T> = T extends object ? {
  [P in keyof T]?: DeepPartial<T[P]>;
} : T;

export type createCRUDLControlsProps<T> = {
  recordName: string;
  fields: (keyof T)[];
  createMutation: string;
  updateMutation: string;
  deleteMutation: string;
  getQuery: string;
  listQuery: string;
  sentinelData: DeepPartial<T>;
};

export const createCRUDLControls = <T extends object>(props: createCRUDLControlsProps<T>) => {
  const CreateComp = createCreateRecordComponent(props);
  const ViewComp = createViewComp<T>(props);
  const EditComp = createEditComp<T>(props);
  const DetailComp = createDetailComponent({
    ...props,
    ViewComp,
    EditComp,
  });
  const GetComp = createGetRecordComponent({
    ...props,
    DetailComp,
  });
  
  const ListComp = createListComponent({
    ...props,
    DetailComp,
  });

  return () => {
    return (
      <Flex direction='column'>
        <Heading level={2}>CRUDL Actions</Heading>
        <CreateComp />
        <GetComp />
        <ListComp />
      </Flex>
    );
  };
};