import React from 'react';
import { useWrapperContext } from './Wrapper';
import type {
  FormSidebarExtensionProps,
  AppProps,
  FieldExtensionProps as FieldExtensionPropsBase,
  AppInstallation,
} from '@hygraph/app-sdk';

export function useFieldExtension() {
  return useWrapperContext() as FieldExtensionProps;
}

export function useFormSidebarExtension() {
  return useWrapperContext() as FormSidebarExtensionProps;
}

export function useUiExtensionDialog<
  DialogReturn = any,
  DialogProps = Record<string, unknown>
>() {
  return useWrapperContext() as {
    onCloseDialog: (value?: DialogReturn | null) => void;
  } & DialogProps;
}

export function useApp() {
  const appProps = useWrapperContext() as AppProps;

  const installProps = useUpdateInstallation(appProps?.updateInstallation);
  return { ...appProps, useUpdateInstallation: () => installProps } as const;
}

function useUpdateInstallation(installApp: AppProps['updateInstallation']) {
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [data, setData] = React.useState<AppInstallation>();

  const executeInstall: AppProps['updateInstallation'] = args => {
    setLoading(true);
    setError('');

    return installApp(args)
      .then(installation => {
        setData(installation);
        setLoading(false);
        return installation;
      })
      .catch(error => {
        setError(error);
        setLoading(false);
        return error;
      });
  };

  return [executeInstall, { data, error, loading }] as const;
}

export interface FieldExtensionProps
  extends Omit<FieldExtensionPropsBase, 'onBlur' | 'onChange' | 'onFocus'> {
  onBlur: <T extends HTMLElement = HTMLElement>(
    event?: React.FocusEvent<T>
  ) => Promise<void>;

  onChange: <T extends HTMLElement = HTMLElement>(
    event: React.ChangeEvent<T> | any
  ) => Promise<void>;

  onFocus: <T extends HTMLElement = HTMLElement>(
    event?: React.FocusEvent<T>
  ) => Promise<void>;
}