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;
  onApprove?: () => void;
  onReject?: () => void;
  isApproveLoading?: boolean;
  isRejectLoading?: boolean;
  showApproveReject?: boolean;
}

export const FormActions = <T,>({
  type,
  formik,
  editUrl,
  onDelete,
  disableSubmit = false,
  onApprove,
  onReject,
  isApproveLoading = false,
  isRejectLoading = false,
  showApproveReject = false,
}: FormActionsProps<T>) => {
  return (
    <div className='flex flex-row justify-between gap-2 flex-wrap'>
      {type !== 'add' && (
        <div className='flex flex-row justify-start gap-2'>
          {onDelete && (
            <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>
          )}
          {type === 'detail' &&
            showApproveReject &&
            (onApprove || onReject) && (
              <>
                {onApprove && (
                  <Button
                    type='button'
                    color='success'
                    onClick={onApprove}
                    className='px-4'
                    isLoading={isApproveLoading}
                  >
                    <Icon
                      icon='material-symbols:check-circle-outline'
                      width={24}
                      height={24}
                      className='justify-start text-sm'
                    />
                    Approve
                  </Button>
                )}
                {onReject && (
                  <Button
                    type='button'
                    color='error'
                    onClick={onReject}
                    className='px-4'
                    isLoading={isRejectLoading}
                  >
                    <Icon
                      icon='material-symbols:cancel-outline'
                      width={24}
                      height={24}
                      className='justify-start text-sm'
                    />
                    Reject
                  </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.isSubmitting}
          >
            Submit
          </Button>
        </div>
      )}
    </div>
  );
};