import React from "react";
import Modal from 'react-modal';
import style from "./modalBasketGoods.module.sass";
import GoodsElement from "./modalBasketGoodsElement/modalBasketGoodsElement";
import {connect} from 'react-redux';
import {goodsBasketDataUpdate} from "../../../actions/actionCreator";
import ButtonToIssueOrder from '../../buttons/buttonToIssueOrder/buttonToIssueOrder';

Modal.setAppElement('#root');

const ModalBasketGoods = (props) => {
    const {isOpen, onRequestClose, basketData} = props;

    const summaryOrderCountHandler = () => {
        let sum = 0;
        basketData.map(simpleGoodsData => {
            sum += simpleGoodsData.price * simpleGoodsData.count
        });
        return sum.toFixed(2);
    };

    basketData.length == 0 && onRequestClose();

    return(
          <>
              <Modal
                isOpen={isOpen}
                onRequestClose={onRequestClose}
                overlayClassName={style.overlay}
                className={style.modalMainContainer}
                shouldCloseOnOverlayClick={false}
              >
                  <div className={style.contentContainer}>
                      <h1>Корзина</h1>
                      {basketData.map(simpleGoodsData => (
                          <GoodsElement
                              simpleGoodsData={simpleGoodsData}
                              closeModal={() => onRequestClose()}
                          />
                      ))}
                      <div className={style.payment}>
                          <p>Итого:</p>
                          <p>{summaryOrderCountHandler()} грн.</p>
                      </div>
                      <ButtonToIssueOrder/>
                      <div className={style.continue} onClick={() => onRequestClose()}>Продолжить покупки</div>
                  </div>
              </Modal>
          </>
       );
};

const mapStateToProps = state => {
    const {basketData} = state.goodsBasketReducers;

    return {
        basketData
    }
};
const mapDispatchToProps = dispatch => ({
    updateBasketData: (basketData) => dispatch(goodsBasketDataUpdate(basketData))
});


export default connect(mapStateToProps, mapDispatchToProps)(ModalBasketGoods);