import { ExportState, FiltersMap, TransitionState } from '@wix/bex-core';
import { Box, Text } from '@wix/design-system';
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
// import { Collapse } from '../Collapse';
import { reaction } from 'mobx';
import { LinearAbsoluteProgressBar } from './LinearAbsoluteProgressBar';

export interface ExportStepProgressProps<T, F extends FiltersMap> {
  state: ExportState<T, F>;
}

function _ExportStepProgress<T, F extends FiltersMap>({
  state,
}: ExportStepProgressProps<T, F>) {
  const { counter, totalForExport, absoluteCounter, translate: t } = state;

  const [collapse] = useState(() => new TransitionState());

  useEffect(() => {
    const disposers = [
      reaction(
        () => state.iterationsCountPoll.pollCount > 7,
        (show) => {
          collapse.setShow(show);
        },
      ),
    ];

    return () => {
      disposers.forEach((d) => d());
    };
  }, []);

  return (
    <Box gap="SP1" direction="vertical" width="100%">
      <LinearAbsoluteProgressBar
        value={counter}
        count={absoluteCounter}
        total={totalForExport}
        dataHook="export-linear-progress-bar"
      />
      <Text widows>{t('cairo.export.exportingDescription')}</Text>
      {/* <Collapse state={collapse} timeout={300}>*/}
      {/*  <Text>Still on it...</Text>*/}
      {/* </Collapse>*/}
    </Box>
  );
}

export const ExportStepProgress = observer(_ExportStepProgress);