import React from 'react';
import {connect} from 'react-redux';
import style from './resultSearchContainer.module.sass';


const ResponseResultContainer = (props) => {
    const {selectValueHandler, data} = props;

    if(props.settings.city.length > 0 && data.length === 0) {
        return (
            <div className={style.mainContainer}>
                Город не найден. Проверьте пожалуйста написанное или введите ближайший к вам!
            </div>
        )
    }

    return(
        <ul className={style.mainContainer}>

            {
                props.settings.city !== '' && (
                    data.map((elem, index) => {
                        return (
                            <li className={style.responseResultSimpleElement}
                                onClick={() => selectValueHandler(elem)}
                                key={index}
                            >
                                {`${elem['SettlementTypeDescriptionRu'].slice(0, 1)}. ${elem['DescriptionRu']}, ${elem['AreaDescriptionRu']}`}
                            </li>
                        );
                    })
                )
            }
        </ul>
    )
};

const mapStateToProps = state => {
  const {settings, data} = state.dynamicSearchLocationReducers;

  return {
      settings, data
  }
};

export default connect(mapStateToProps)(ResponseResultContainer);