import React, { useEffect } from 'react';
import { bindActionCreators } from 'redux';
import { injectIntl, intlShape } from 'react-intl';
import { useSelector, useDispatch } from 'react-redux';
import { findIndex } from 'lodash';

import { saveParams } from 'redux-core/modules/search';
import { getPlans } from 'redux-core/modules/plans';

import { PaddedContainer } from 'components/designSystem';
import FilterOptionHeader from './components/FilterOptionHeader';
import Slider from './components/Slider';

const PlansFilter = ({ intl }) => {
  const dispatch = useDispatch();

  const plans = useSelector(state => state.plans.items);
  const isLoading = useSelector(state => state.plans.isLoading);

  const minMonthlyValue =
    useSelector(state => parseFloat(state.search.params.min_monthly_value));

  const maxMonthlyValue =
    useSelector(state => parseFloat(state.search.params.max_monthly_value));

  const getPlansAction = bindActionCreators(getPlans, dispatch);
  const saveParamsAction = bindActionCreators(saveParams, dispatch);

  const handleOnChange = ([min, max]) => {
    const minPlan = plans[min];
    const maxPlan = plans[max];

    saveParamsAction({
      min_monthly_value: minPlan.value,
      max_monthly_value: maxPlan.value,
    });
  };

  const getValues = () => {
    const minIndex = findIndex(plans, plan => Number(plan.value) === minMonthlyValue);
    const maxIndex = findIndex(plans, plan => Number(plan.value) === maxMonthlyValue);

    const index = (minIndex > -1 && maxIndex > -1) ? [minIndex, maxIndex] : [0, 0];

    return index;
  };

  useEffect(() => {
    if (!plans.length) getPlansAction();
  }, []);

  return (
    !isLoading ?
      (
        <PaddedContainer>
          <FilterOptionHeader
            title={intl.formatMessage({
              id: 'gym_search.filters_modal.plans.title',
            })}
          />

          <Slider
            plansLength={plans.length}
            onChange={handleOnChange}
            values={getValues()}
          />
        </PaddedContainer>
      ) : null
  );
};

PlansFilter.propTypes = {
  intl: intlShape.isRequired,
};

export default injectIntl(PlansFilter);