import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState } from 'react';
import { useTheme, Paper, Stepper, Step, MobileStepper, Button } from '@mui/material';
import Stat from '../Stat/index.js';
import { StatisticSectionContainer, StatisticSectionWrapper } from './style.js';
import ArrowIconbackslider from '../../Icons/ArrowIconbackslider/index.js';
import ArrowIconNextslider from '../../Icons/Arrowiconslider/index.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';

var StatSection = function StatSection(_ref) {
  var steps = _ref.steps;
  var theme$1 = useTheme();

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      minValue = _useState2[0],
      setMinValue = _useState2[1];

  var _useState3 = useState(4),
      _useState4 = _slicedToArray(_useState3, 2),
      maxValue = _useState4[0],
      setMaxValue = _useState4[1];

  var _useState5 = useState(1),
      _useState6 = _slicedToArray(_useState5, 2),
      currentPageValue = _useState6[0],
      setCurrentPageValue = _useState6[1];

  var _useState7 = useState(4),
      _useState8 = _slicedToArray(_useState7, 2),
      numEachPage = _useState8[0];
      _useState8[1];

  var _React$useState = React__default.useState(0),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      activeStep = _React$useState2[0];
      _React$useState2[1];

  steps.length;

  var handleNext = function handleNext() {
    setMinValue(currentPageValue * numEachPage);
    setMaxValue((currentPageValue + 1) * numEachPage <= steps.length ? (currentPageValue + 1) * numEachPage : steps.length);
    setCurrentPageValue(currentPageValue + 1);
  };

  var handleBack = function handleBack() {
    setMinValue((currentPageValue - 2) * numEachPage);
    setMaxValue((currentPageValue - 1) * numEachPage >= steps.length && (currentPageValue - 2) * numEachPage >= steps.length - numEachPage ? steps.length : (currentPageValue - 1) * numEachPage);
    setCurrentPageValue(currentPageValue - 1);
  };

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), /*#__PURE__*/React__default.createElement(StatisticSectionContainer, null, /*#__PURE__*/React__default.createElement(StatisticSectionWrapper, null, /*#__PURE__*/React__default.createElement(Paper, {
    elevation: 0,
    sx: {
      display: "flex",
      overflow: "hidden",
      width: "100%"
    }
  }, /*#__PURE__*/React__default.createElement(Stepper, {
    activeStep: activeStep,
    alternativeLabel: true
  }, steps.slice(minValue, maxValue).map(function (step, index) {
    return /*#__PURE__*/React__default.createElement(Step, {
      key: index
    }, /*#__PURE__*/React__default.createElement(Stat, {
      heading: step.heading,
      stats: step.stats,
      icon: step.icon,
      percentage: step.percentage,
      type: step.type,
      info: step.info,
      isInfo: step.isInfo,
      infoPlace: step.infoPlace
    }));
  }))), steps.length > 4 ? /*#__PURE__*/React__default.createElement(MobileStepper, {
    nextButton: /*#__PURE__*/React__default.createElement(Button, {
      onClick: handleNext,
      disabled: Math.ceil(steps.length / numEachPage) === currentPageValue
    }, theme$1.direction === "rtl" ? /*#__PURE__*/React__default.createElement(ArrowIconbackslider, null) : /*#__PURE__*/React__default.createElement(ArrowIconNextslider, null)),
    backButton: /*#__PURE__*/React__default.createElement(Button, {
      onClick: handleBack,
      disabled: currentPageValue === 1
    }, theme$1.direction === "rtl" ? /*#__PURE__*/React__default.createElement(ArrowIconNextslider, null) : /*#__PURE__*/React__default.createElement(ArrowIconbackslider, null))
  }) : null)));
};

export { StatSection as default };
//# sourceMappingURL=index.js.map
