import React, {MutableRefObject, ReactNode, Suspense, useState} from 'react';
import {Dialog} from '../ui/overlays/dialog/dialog';
import {DialogHeader} from '../ui/overlays/dialog/dialog-header';
import {Trans} from '../i18n/trans';
import {DialogBody} from '../ui/overlays/dialog/dialog-body';
import {ProgressCircle} from '../ui/progress/progress-circle';
import {useDialogContext} from '../ui/overlays/dialog/dialog-context';
import {DialogFooter} from '../ui/overlays/dialog/dialog-footer';
import {Button} from '../ui/buttons/button';
import type ReactAce from 'react-ace';

const AceEditor = React.lazy(() => import('./ace-editor'));

interface TextEditorSourcecodeDialogProps {
  defaultValue: string;
  mode?: 'css' | 'html' | 'php_laravel_blade';
  title: ReactNode;
  onSave?: (value?: string) => void;
  isSaving?: boolean;
  footerStartAction?: ReactNode;
  beautify?: boolean;
  editorRef?: MutableRefObject<ReactAce | null>;
}
export function AceDialog({
  defaultValue,
  mode = 'html',
  title,
  onSave,
  isSaving,
  footerStartAction,
  beautify,
  editorRef,
}: TextEditorSourcecodeDialogProps) {
  const [value, setValue] = useState(defaultValue);
  const [isValid, setIsValid] = useState<boolean>(true);

  return (
    <Dialog size="fullscreen" className="h-full w-full">
      <DialogHeader>{title}</DialogHeader>
      <DialogBody className="relative flex-auto" padding="p-0">
        <Suspense
          fallback={
            <div className="flex h-400 w-full items-center justify-center">
              <ProgressCircle
                aria-label="Loading editor..."
                isIndeterminate
                size="md"
              />
            </div>
          }
        >
          <AceEditor
            beautify={beautify}
            mode={mode}
            onChange={newValue => setValue(newValue)}
            defaultValue={value || ''}
            onIsValidChange={setIsValid}
            editorRef={editorRef}
          />
        </Suspense>
      </DialogBody>
      <Footer
        disabled={!isValid || isSaving}
        value={value}
        onSave={onSave}
        startAction={footerStartAction}
      />
    </Dialog>
  );
}

interface FooterProps {
  disabled: boolean | undefined;
  value?: string;
  onSave?: (value?: string) => void;
  startAction?: ReactNode;
}
function Footer({disabled, value, onSave, startAction}: FooterProps) {
  const {close} = useDialogContext();
  return (
    <DialogFooter dividerTop startAction={startAction}>
      <Button onClick={() => close()}>
        <Trans message="Cancel" />
      </Button>
      <Button
        disabled={disabled}
        variant="flat"
        color="primary"
        onClick={() => {
          if (onSave) {
            onSave(value);
          } else {
            close(value);
          }
        }}
      >
        <Trans message="Save" />
      </Button>
    </DialogFooter>
  );
}