import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, Fragment } from 'react';
import { indexOf } from 'lodash';
import MapModalVehicleMarkerDollarIcon from '../../Icons/MapModalVehicleMarkerDollarIcon/index.js';
import MapModalVehicleMarkerRouteIcon from '../../Icons/MapModalVehicleMarkerRouteIcon/index.js';
import MapModalVehicleMarkerRatingStarIcon from '../../Icons/MapModalVehicleMarkerRatingStarIcon/index.js';
import MapModalVehicleMarkerFilledRatingStarIcon from '../../Icons/MapModalVehicleMarkerFilledRatingStarIcon/index.js';
import { VehicleMarkerCompletedRideWrapper, VehicleMarkerCompletedRideHeaderContainer, VehicleMarkerCompletedRideHeaderWrapper, VehicleMarkerCompletedRideStatisticsSectionContainer, VehicleMarkerCompletedRideStatisticsSectionWrapper, VehicleMarkerCompletedRideStatisticsSectionContentWrapper, VehicleMarkerCompletedRideVehicleCardSectionWrapper, VehicleMarkerCompletedRideRatingsWrapper, VehicleMarkerCompletedRideRatingsStarWrapper, VehicleMarkerRiderDetailsCurrentUserSectionWrapper } from './style.js';
import { VehicleMarkerCompletedRideHeaderHeadingWrapper, VehicleMarkerCompletedRideHeaderSubHeadingWrapper, VehicleMarkerCompletedRideStatisticsSectionContentValueWrapper, VehicleMarkerCompletedRideStatisticsSectionContentTextWrapper, VehicleMarkerCompletedRideVehicleCardSectionHeadingWrapper, VehicleMarkerCompletedRideRatingsHeadingWrapper, VehicleMarkerRiderDetailsCurrentUserSectionHeadingWrapper, VehicleMarkerRiderDetailsCurrentUserSectionUsernameWrapper } from '../../Typography/Paragraph/index.js';
import FilterVehicleCard from '../../VehicleCard/FilterVehicleCard/index.js';
import '../../VehicleCard/FreePort/style.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';
import '@mui/material';
import '../../Icons/IconWrapper/index.js';
import '../../VehicleCard/EngagedPort/style.js';
import MapModalVehicleMarkerCrossIcon from '../../Icons/MapModalVehicleMarkerCrossIcon/index.js';

var ratingArray = [1, 2, 3, 4, 5];

var VehicleMarkerCompletedRideModal = function VehicleMarkerCompletedRideModal(_ref) {
  var riderNameTrip = _ref.riderNameTrip,
      status = _ref.status,
      price = _ref.price,
      distance = _ref.distance,
      pause = _ref.pause,
      name = _ref.name;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      starFilled = _useState2[0],
      setStarFilled = _useState2[1];

  var isSelected = function isSelected(ids, id) {
    return indexOf(ids, id) >= 0;
  };

  var onRate = function onRate(r) {
    return function () {
      var starRate = [];

      for (var index = r; index > 0; index--) {
        starRate.push(index);
      }

      setStarFilled(starRate);
    };
  };

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideHeaderContainer, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideHeaderWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideHeaderHeadingWrapper, null, riderNameTrip), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideHeaderSubHeadingWrapper, null, status)), /*#__PURE__*/React__default.createElement(MapModalVehicleMarkerCrossIcon, null)), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContainer, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentValueWrapper, null, price, /*#__PURE__*/React__default.createElement(MapModalVehicleMarkerDollarIcon, null)), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentTextWrapper, null, "(CAD)")), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentValueWrapper, null, distance, /*#__PURE__*/React__default.createElement(MapModalVehicleMarkerRouteIcon, null)), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentTextWrapper, null, "Dist. (KM)")), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentValueWrapper, null, pause, /*#__PURE__*/React__default.createElement(MapModalVehicleMarkerRouteIcon, null)), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideStatisticsSectionContentTextWrapper, null, "Pause (KM)")))), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideVehicleCardSectionWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideVehicleCardSectionHeadingWrapper, null, "Vehicle"), /*#__PURE__*/React__default.createElement(FilterVehicleCard, {
    progress: 80,
    vehicleName: "Vehicle Name",
    status: "Live",
    ticketNumber: "1"
  })), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideRatingsWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideRatingsHeadingWrapper, null, "Rating"), /*#__PURE__*/React__default.createElement(VehicleMarkerCompletedRideRatingsStarWrapper, null, ratingArray.map(function (r) {
    return /*#__PURE__*/React__default.createElement(Fragment, null, isSelected(starFilled, r) ? /*#__PURE__*/React__default.createElement(MapModalVehicleMarkerFilledRatingStarIcon, {
      onClick: onRate(r)
    }) : /*#__PURE__*/React__default.createElement(MapModalVehicleMarkerRatingStarIcon, {
      onClick: onRate(r)
    }));
  }))), /*#__PURE__*/React__default.createElement(VehicleMarkerRiderDetailsCurrentUserSectionWrapper, null, /*#__PURE__*/React__default.createElement(VehicleMarkerRiderDetailsCurrentUserSectionHeadingWrapper, null, "Rider"), /*#__PURE__*/React__default.createElement(VehicleMarkerRiderDetailsCurrentUserSectionUsernameWrapper, null, name))));
};

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