import {
  BuilderProvider as BuilderProviderCore,
  BuilderState as BuilderStateCore,
  PreviewDevice,
} from '@tempi/core-editor';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { CoreExtraBuilderState } from '@tempi/core-elements';
import { formAccountApi } from 'services/formAccount';
import { formConfigApi } from 'services/formConfig';
import { commonService } from 'services/common';
import { uploadFileHandler } from 'services/image';
import { luckyDrawService } from 'services/lucky-draw';
import { GachaGameService } from 'services/gacha-game';
import { isLoggedIn, useAuth } from '@tempi/auth';
import { selectors } from '@tempi/core-elements';
import { BaseStoreState } from '@tempi/core-renderer';
import { EditorWrapper } from 'modules/builder';

import {
  DesignMode,
  LoadingPage,
  RootEditor,
  useResolver,
} from '@tempi/editor-site';
import { useCustomComponent } from 'hooks';
type ExtraBuilderState = CoreExtraBuilderState & {
  designMode?: DesignMode;
  setDesignMode?: React.Dispatch<React.SetStateAction<DesignMode>>;
  initialDevice: PreviewDevice;
};
export type BuilderState = BuilderStateCore & ExtraBuilderState;
export const BuilderProvider = ({
  children,
}: {
  children?: React.ReactNode;
}) => {
  const landingPageSelectors = {
    ...selectors,
    RootEditor,
  };
  const [designMode, setDesignMode] = useState<DesignMode>();
  const [editorTerminal, setEditorTerminal] = useState<number | string>();
  const { id } = useParams<{
    id: string;
  }>();
  const { customLoaded, resolvers: newResolvers } = useCustomComponent();
  const { resolver, addResolver } = useResolver();
  const { merchantIdsDisplayCustomComponent = [], flagPB4292 } =
    window?.config || {};
  const { currentMerchant } = useAuth();
  const isMerchantPermitted =
    merchantIdsDisplayCustomComponent.length === 0 ||
    merchantIdsDisplayCustomComponent.includes(currentMerchant?.id);
  useEffect(() => {
    addResolver(landingPageSelectors);
  }, []);
  useEffect(() => {
    if (Object.keys(newResolvers).length) addResolver(newResolvers);
  }, [newResolvers]);
  if (!customLoaded && isMerchantPermitted) return <LoadingPage />;
  return (
    (customLoaded || !isMerchantPermitted) && (
      <EditorWrapper resolver={resolver}>
        <InnerProvider
          extraBuilderState={{
            designMode,
            setDesignMode,
            editorTerminal,
            setEditorTerminal,
            ...formAccountApi,
            ...commonService,
            getForm: (id: number) =>
              formConfigApi
                .getListForm({ formIds: id.toString() })
                .then((forms) => forms?.[0]),
            upsertForm: (body) =>
              formConfigApi
                .upsertForm(body)
                .then((data) => data?.data?.id)
                .catch((err) => console.error(err)),
            ...formAccountApi,
            ...luckyDrawService,
            ...GachaGameService,
          }}
          trackHelper={{ enable: true }}
          pageId={+id}
          uploadFileHandler={isLoggedIn() ? uploadFileHandler : undefined}
          storeState={{
            env: window.config.env,
            featureFlags: { flagPB4292 },
          }}
        >
          {children}
        </InnerProvider>
      </EditorWrapper>
    )
  );
};
const InnerProvider = (props) => {
  return <BuilderProviderCore<BaseStoreState, ExtraBuilderState> {...props} />;
};