import './index.scss';

import type { PropsWithChildren } from 'react';
import type { MlModalProps } from './types';
import { StatusProvider, useSetStatusInactivating as useModalClose } from './contexts/status';
import { Trigger } from './trigger';
import { LoaderDataProvider, useLoaderDataState as useModalLoaderData } from './contexts/loader-data';
import { Loading } from './loading';
import { View } from '@tarojs/components';
import { PanelSlot } from './panel-slot';
import { ModalContainer } from './modal-container';
import { Panel } from './panel';

export { useModalClose, useModalLoaderData };

export function MlModal({
  disable,

  triggerStyle,
  triggerClassName = 'h-full w-full flex items-center',
  triggerSlot,

  panelStyle,
  panelClassName = 'flex flex-col',
  panelSlot,

  maskCloseable = true,
  placement = 'center',
  loader,
}: PropsWithChildren<MlModalProps>) {
  return (
    <LoaderDataProvider>
      <StatusProvider>
        <Trigger
          triggerStyle={triggerStyle}
          triggerClassName={triggerClassName}
          disable={disable}
          loader={loader}
          triggerSlot={triggerSlot}
        />
        <View>
          <Loading />
          <ModalContainer placement={placement} maskCloseable={maskCloseable}>
            <Panel placement={placement} panelStyle={panelStyle} panelClassName={panelClassName}>
              <PanelSlot panelSlot={panelSlot} />
            </Panel>
          </ModalContainer>
        </View>
      </StatusProvider>
    </LoaderDataProvider>
  );
}