import React from 'react';
import style from './dynamicSearchGoods.module.sass';
import {connect} from 'react-redux';
import {
    appendOrdersAdmin,
    dynamicSearchGoods,
    autoFillOnSelectedGood
} from "../../../actions/actionCreator";
import {units} from "../../../constants/units";
import {dynamicSearchGoodsConstants} from "../../../constants/typesComponents";
import {pathStaticGoodsImages} from "../../../constants/images";
import {Link} from 'react-router-dom';

const DynamicSearchGoods = (props) => {
    const {packId, type} = props;


    const appendOrdersHandler = (e, attributes) => {
        const value = parseInt(e.target.value);
        if(isNaN(value)) {
            attributes.map(elem => {
                if(elem.valueAttribute == e.target.value) {
                    props.appendOrders(packId, elem.id);
                }
            });
        }else {
            attributes.map(elem => {
                if(elem.valueAttribute == value) {
                    props.appendOrders(packId, elem.id);
                }
            });
        }

    };


    if(type === dynamicSearchGoodsConstants.ORDERS) {
        return (
            <div className={style.mainContainer}>
                <input
                    onInput={(e) => props.dynamicSearchGoods(e.target.value)}
                />
                <div className={style.searchContentContainer}>
                    {
                        props.data.length > 0 && (

                            props.data.map(elem => {
                                const {GoodsAttributes} = elem;
                                return (
                                    <div className={style.goodsContainer}>
                                        <h2>{elem.goodsName}</h2>
                                        <select onClick={(e) => appendOrdersHandler(e, GoodsAttributes)}>
                                            {
                                                GoodsAttributes.map(elem => (
                                                    <option>
                                                        {elem.valueAttribute}{units[elem.nameAttribute]}
                                                    </option>
                                                ))
                                            }
                                        </select>
                                    </div>
                                )
                            })

                        )}
                </div>
            </div>
        );
    }else if(type === dynamicSearchGoodsConstants.GOODS_UPDATER) {
        return (
          <div className={style.mainContainer}>
              <input
                  onInput={(e) => props.dynamicSearchGoods(e.target.value)}
              />
              <div className={style.searchContentContainer}>
                  {
                      props.data.length > 0 && (

                          props.data.map(elem => (
                              <div
                                  className={style.goodsContainer}
                                  onClick={() => props.autoFillOnSelectedGood(elem)}
                              >
                                  <h2>{elem.goodsName}</h2>
                              </div>
                          ))
                      )}
              </div>
          </div>
        );
    }else if(type === dynamicSearchGoodsConstants.SINGLE_GOODS_SEARCHER) {
        return (
          <div className={style.mainContainer}>
              <input
                  onInput={(e) => props.dynamicSearchGoods(e.target.value)}
              />
              <div className={style.searchContentContainer}>
                  {
                      props.data.length > 0 && (

                          props.data.map(elem => (
                              <Link
                                  className={style.goodsContainer}
                                  to={`/product/${elem.id}`}
                              >
                                  <img
                                      src={pathStaticGoodsImages + elem.GoodsAttributes[0].imgUrlArray[0]}
                                      alt={elem.GoodsAttributes[0].imgUrlArray[0]}
                                  />
                                  <h2>{elem.goodsName}</h2>
                              </Link>
                          ))
                      )}
              </div>
          </div>
        );
    }
};

const mapStateToProps = state => {
    const {data} = state.dynamicSearchGoodsReducers;

    return {
        data
    }
};

const mapDispatchToProps = dispatch => ({
    dynamicSearchGoods: searchString => dispatch(dynamicSearchGoods(searchString)),
    appendOrders: (packId, goodId) => dispatch(appendOrdersAdmin(packId, goodId)),
    autoFillOnSelectedGood: (goodsData) => dispatch(autoFillOnSelectedGood(goodsData))
});

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