import {FieldValues, SubmitHandler, UseFormReturn} from 'react-hook-form';
import clsx from 'clsx';
import React, {ReactNode} from 'react';
import {useStickySentinel} from '../utils/hooks/sticky-sentinel';
import {Form} from '../ui/forms/form';
import {Button} from '../ui/buttons/button';
import {Trans} from '../i18n/trans';

interface Props<T extends FieldValues> {
  onSubmit: SubmitHandler<T>;
  form: UseFormReturn<T>;
  title: ReactNode;
  subTitle?: ReactNode;
  isLoading: boolean;
  children: ReactNode;
  actions?: ReactNode;
  backButton?: ReactNode;
  disableSaveWhenNotDirty?: boolean;
  wrapInContainer?: boolean;
}
export function CrupdateResourceLayout<T extends FieldValues>({
  onSubmit,
  form,
  title,
  subTitle,
  children,
  actions,
  backButton,
  isLoading = false,
  disableSaveWhenNotDirty = false,
  wrapInContainer = true,
}: Props<T>) {
  const {isSticky, sentinelRef} = useStickySentinel();
  const isDirty = !disableSaveWhenNotDirty
    ? true
    : Object.keys(form.formState.dirtyFields).length;

  return (
    <Form
      onSubmit={onSubmit}
      onBeforeSubmit={() => form.clearErrors()}
      form={form}
    >
      <div ref={sentinelRef} />
      <div
        className={clsx(
          'sticky top-0 z-10 my-12 transition-shadow md:my-24',
          isSticky && 'bg-paper shadow'
        )}
      >
        <div
          className={clsx(
            'flex items-center gap-24 py-14 md:items-start',
            wrapInContainer && 'container mx-auto px-24'
          )}
        >
          {backButton}
          <div className="overflow-hidden overflow-ellipsis md:mr-64">
            <h1 className="overflow-hidden overflow-ellipsis whitespace-nowrap text-xl md:text-3xl">
              {title}
            </h1>
            {subTitle && <div className="mt-4">{subTitle}</div>}
          </div>
          <div className="mr-auto"></div>
          {actions}
          <Button
            variant="flat"
            color="primary"
            type="submit"
            disabled={isLoading || !isDirty}
          >
            <Trans message="Save" />
          </Button>
        </div>
      </div>
      <div
        className={
          wrapInContainer ? 'container mx-auto px-24 pb-24' : undefined
        }
      >
        <div className="rounded">{children}</div>
      </div>
    </Form>
  );
}