lti-web-client/src/components/helper/form/FormActions.tsx

import { Icon } from '@iconify/react';
import { FormikContextType } from 'formik';
import Button from '@/components/Button';
import { cn } from '@/lib/helper';

interface FormActionsProps<T> {
  type: 'add' | 'edit' | 'detail';
  formik: FormikContextType<T>;
  editUrl?: string;
  onDelete?: () => void;
  disableSubmit?: boolean;
}

export const FormActions = <T,>({
  type,
  formik,
  editUrl,
  onDelete,
  disableSubmit = false,
}: FormActionsProps<T>) => {
  return (
    <div className='flex flex-row justify-between gap-2 flex-wrap'>
      {type !== 'add' && onDelete && (
        <div className='flex flex-row justify-start gap-2'>
          <Button
            type='button'
            color='error'
            onClick={onDelete}
            className='px-4'
          >
            <Icon
              icon='material-symbols:delete-outline-rounded'
              width={24}
              height={24}
              className='justify-start text-sm'
            />
            Delete
          </Button>
          {type !== 'edit' && editUrl && (
            <Button
              type='button'
              color='warning'
              href={editUrl}
              className='px-4'
            >
              <Icon
                icon='material-symbols:edit-outline'
                width={24}
                height={24}
                className='justify-start text-sm'
              />
              Edit
            </Button>
          )}
        </div>
      )}
      {type !== 'detail' && (
        <div
          className={cn('flex flex-row justify-end gap-2', {
            'w-full': type === 'add',
          })}
        >
          <Button
            type='reset'
            color='warning'
            className='px-4'
            onClick={() => {
              formik.handleReset();
              formik.validateForm();
            }}
          >
            Reset
          </Button>
          <Button
            type='submit'
            color='primary'
            className='px-4'
            isLoading={formik.isSubmitting}
            disabled={
              disableSubmit ||
              !formik.isValid ||
              !formik.dirty ||
              formik.isSubmitting
            }
          >
            Submit
          </Button>
        </div>
      )}
    </div>
  );
};