export type ModalPopupContextValues = {
  activeModal: string;
  showModal: <Options>(activeModal: ModalPopupName, options?: Options) => void;
  hideModal: VoidFunction;
};

export const ModalPopupContext = createContext<
  ModalPopupContextValues | undefined
>(undefined);

export const useModal = () => {
  const context = useContext(ModalPopupContext);

  if (context === undefined) {
    throw new Error('useModal must be used within ModalPopupProvider');
  }

  return context;
};

// src\features\modal-popup\ModalPopupProvider.tsx
import React, {useMemo, useState} from 'react';
import {ModalRoot, SplitLayout} from '@vkontakte/vkui';

import {AddDevToWhiteList} from './modals/AddDevToWhiteList';
import {ChangeAppSecurityStatus} from './modals/ChangeAppSecurityStatus';
import {ChangeAppStatus} from './modals/ChangeAppStatus';
import {ChangeAppVersionStatus} from './modals/ChangeAppVersionStatus';
import {ChangeDeveloperStatus} from './modals/ChangeDeveloperStatus';
import {Dialog} from './modals/Dialog';
import {EditingDeveloperInformation} from './modals/EditingDeveloperInformation';
import {PaymentView} from './modals/PaymentView';
import {ModalPopupContext, ModalPopupContextValues} from './context';
import styles from './ModalPopupProvider.module.css';
import {ModalPopupName} from './modals.entity';

export const ModalPopupProvider = ({children}) => {
  const [activeModal, setActiveModal] = useState<string>(null);
  const [options, setOptions] = useState<any>({});

  const showModal = (activeModal: ModalPopupName, options?: any) => {
    setActiveModal(activeModal);
    setOptions(options);
  };

  const hideModal = () => {
    setActiveModal(null);
  };

  const modal = (
    <ModalRoot activeModal={activeModal} onClose={hideModal}>
      <Dialog id={ModalPopupName.DIALOG} options={options} />
      <AddDevToWhiteList id={ModalPopupName.ADD_DEV_TO_WHITE_LIST} />
      <ChangeAppVersionStatus
        id={ModalPopupName.CHANGE_APP_VERSION_STATUS}
        {...options}
      />
      <ChangeAppStatus id={ModalPopupName.CHANGE_APP_STATUS} {...options} />
      <ChangeDeveloperStatus
        id={ModalPopupName.CHANGE_COMPANY_STATUS}
        {...options}
      />
      <ChangeAppSecurityStatus
        id={ModalPopupName.CHANGE_APP_SECURITY_STATUS}
        {...options}
      />
      <EditingDeveloperInformation
        id={ModalPopupName.EDITING_DEVELOPER_INFORMATION}
        {...options}
      />
      <PaymentView id={ModalPopupName.PAYMENT_VIEW} {...options} />
    </ModalRoot>
  );

  const modalPopupContextValue = useMemo<ModalPopupContextValues>(
    () => ({
      activeModal,
      showModal,
      hideModal,
    }),
    [activeModal],
  );

  return (
    <ModalPopupContext.Provider value={modalPopupContextValue}>
      <SplitLayout modal={modal} className={styles.splitLayout}>
        <div className={styles.wrappedContent}>{children}</div>
      </SplitLayout>
    </ModalPopupContext.Provider>
  );
};