import { observer } from 'mobx-react-lite';
import React from 'react';
import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
import { FiltersMap } from '@wix/bex-core';
import { Box, LinearProgressBar, Text } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { CustomActionModal } from '../../ActionModal';

interface AsyncJobProgressModalProps<T, F extends FiltersMap> {
  state: TagsBulkAssignPopoverState<T, F>;
}

export const _AsyncJobProgressModal = <T, F extends FiltersMap>({
  state,
}: AsyncJobProgressModalProps<T, F>) => {
  const {
    asyncJobProgressModalState,
    closeAsyncJobProgressModal,
    updatedItemsPercentage,
  } = state.bulkAssignAsyncState;
  const { translate: t } = useWixPatternsContainer();
  return (
    <CustomActionModal
      state={asyncJobProgressModalState}
      title={t('cairo.tags.bulkItemUpdate.updatingModal.title')}
      primaryButtonText={t('cairo.tags.bulkItemUpdate.updatingModal.CTA')}
      primaryButtonOnClick={closeAsyncJobProgressModal}
      onCloseButtonClick={closeAsyncJobProgressModal}
      dataHook="async-job-progress-modal-layout"
      content={
        <Box
          direction="vertical"
          width="552px"
          gap="SP2"
          paddingTop="SP1"
          paddingBottom="SP1"
        >
          <LinearProgressBar
            dataHook="async-job-progress-modal-progress-bar"
            value={updatedItemsPercentage}
            showProgressIndication
          />
          <Text dataHook="async-job-progress-modal-body-text">
            {t('cairo.tags.bulkItemUpdate.updatingModal.body')}
          </Text>
        </Box>
      }
    />
  );
};

export const AsyncJobProgressModal = observer(_AsyncJobProgressModal);
