import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import axios from 'axios';
import { PullToRefresh, Div, Panel } from '@vkontakte/vkui';


import Icon16Like from '@vkontakte/icons/dist/16/like';
import Icon16LikeOutline from '@vkontakte/icons/dist/16/like_outline';

import '../../scss/MainStyle.scss';
import freeDelivery from '../../img/freeDelivery.png';
import sale from '../../img/sale.png';

import RightMenu from '../utils/RightMenu';
import Search from '../utils/Search';
import { setSearch } from '../../actions/searchAction';
import { api, apiGetBouquetListUrl, apiKey, apiSendFavoritesUrl } from '../../constants/api';

import { setFilter } from '../../actions/filterAction';
import { checkLocalStorage } from '../../utils/checkLocalStorage';
import ButtonIcon from '../utils/ButtonIcon';
import PanelHeader from '../utils/PanelHeader';

class ResultFilter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fetching: false,
      bouquetFiltered: [],
      search: !!this.props.filter && this.props.filter.search,
      total: '',
      limit: 50
    };
    this.getFilteredList = this.getFilteredList.bind(this);
    this.onRefresh = this.onRefresh.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.sendFavorites = this.sendFavorites.bind(this);
    this.moreBouquet = this.moreBouquet.bind(this);
  }

  componentDidMount() {
    this.getFilteredList();
    const { loadSpinner } = this.props;
    loadSpinner(true);
  }


  moreBouquet() {
    const { limit } = this.state;
    let limitCopy = limit;
    console.log('limit', limitCopy);
    limitCopy = limit + limit;
    this.setState({
      limit: limitCopy
    });

    this.getFilteredList(limitCopy);

  }

  onKeyDown(e) {
    if (e.key === 'Enter') {
      console.log('нажал enter');
      const filter = {
        sorting: 'relevation',
        price: '',
        category: '',
        size: '',
        color: '',
        sale: '',
        type: '',
        delivery: '',
        search: this.state.search
      };
      console.log('filter', filter);
      this.props.onSetFilter(filter);
      this.getFilteredList();
    }
  }

  onRefresh() {
    this.setState({ fetching: true });

    setTimeout(() => {
      this.setState({
        fetching: false
      });
    }, this.getFilteredList);
  }

  getFilteredList(limit = 50) {
    const { filter, loadSpinner } = this.props;
    console.log('filter props', filter);
    let copySale = '';
    if (filter.sale !== undefined) {
      if (filter.sale === true || filter.sale === false) {
        copySale = filter.sale === true ? 1 : 0;
      }
    }

    let copyDelivery = '';
    if (filter.delivery !== undefined) {
      if (filter.delivery === true || filter.delivery === false) {
        copyDelivery = filter.sale === true ? 1 : 0;
      }
    }

    const sendJSON = {
      apiKey,
      idCity: localStorage.getItem('codeCity'),
      sorting: filter.sorting !== undefined ? filter.sorting : '',
      min: filter.price !== undefined ? filter.price.min : '',
      max: filter.price !== undefined ? filter.price.max : '',
      category: filter.category !== undefined ? filter.category : '',
      size: filter.size !== undefined ? filter.size : '',
      color: filter.color !== undefined ? filter.color : '',
      sale: filter.sale !== undefined ? copySale : '',
      type: filter.type !== undefined ? filter.type : '',
      free: filter.delivery !== undefined ? copyDelivery : '',
      limit: limit,
      start: 0
    };
    console.log('sendJSON', sendJSON);
    console.log('filter for SendJSON', filter);

    if (!!filter.search) {
      sendJSON.search = filter.search;
    }

    if (checkLocalStorage('userId') && localStorage.getItem('userId'))
      sendJSON.userId = localStorage.getItem('userId');

    axios
      .get(`${api}${apiGetBouquetListUrl}`, {
        params: sendJSON
      })
      .then(response => {
        console.log('response.data.bouquetList 1111', response);
        this.setState({
          bouquetFiltered: response.data.bouquetList,
          total: response.data.total
        });
        loadSpinner(false);
      })
      .catch(error => {
        console.log('error', error);
        loadSpinner(false);
      });


    //document.getElementById('hmtLeft').checked = true;
  }

  sendFavorites(idBouquet, indexI) {
    const { bouquetFiltered } = this.state;
    axios.post(`${api}${apiSendFavoritesUrl}?apiKey=${apiKey}`, {
      userId: localStorage.getItem('userId'),
      token: localStorage.getItem('token'),
      idCity: localStorage.getItem('codeCity'),
      idBouquet
    })
      .then(response => {
        console.log('response', response);
      })
      .catch(error => {
        console.log('error', error);
      });
    let copyBouquet = JSON.parse(JSON.stringify(bouquetFiltered));
    copyBouquet[indexI].favorites = +!bouquetFiltered[indexI].favorites;
    this.setState({
      bouquetFiltered: copyBouquet
    });

  }

  onChange(e) {
    const name = e.target.name;
    const value = e.target.value;

    if (name === 'search') {
      setTimeout(() => {
        this.getFilteredList();
      }, 1500);

      setSearch(value);

      this.setState({
        [name]: value
      });
    } else {
      this.setState({
        [name]: value
      });
    }
  }


  render() {
    const { id, go, goAuth } = this.props;
    const { fetching, bouquetFiltered, total, search } = this.state;

    return (
      <Panel id={id}>
          <PanelHeader
            big
            left={
              <Fragment>
                <ButtonIcon type="back" onClick={go} dataStory="HomePage"/>
                <RightMenu go={go} goAuth={goAuth} getFilteredList={this.getFilteredList}/>
              </Fragment>
            }>
            <Search
              onKeyDown={this.onKeyDown}
              name='search' value={search}
              onChange={this.onChange}
              placeholder="Найти букеты..."
            />
          </PanelHeader>

          <div>
            <div className="contentBlock">

              <Div className='pt-0'>
                            <span
                              className='titleCategoryBouquet d-flex justify-content-center mt-1'>
                                <b>Результаты поиска ({total})</b>
                                        </span>

                <div className="row">
                  {
                    bouquetFiltered.map((valueI, indexI) => (
                      <Fragment key={indexI}>
                        <Div
                          className="card w-100 rounded mt-0 mb-3 ml-3 mr-3 p-0">
                          <div className="card-body p-0 row">
                            <div className='col-6 position-relative'>
                              <div className="blockImg photoWrap">
                                                            <div className="overlay"/>
                                <img onClick={() => go('InfoProduct', {
                                  productId: valueI.id,
                                  urlBack: 'ResultFilter'
                                })}
                                     className="imgBouquetList"
                                     src={valueI.img}
                                     alt='Букет'>
                                </img>
                                <img
                                  className=" imgFreeDelivery d-flex justify-content-end"
                                  src={freeDelivery}
                                  alt='Бесплатная доставка'>
                                </img>

                                {valueI.new_price !== valueI.price &&
                                <img className='imgSale' src={sale}
                                     alt='Скидка'/>}
                              </div>
                            </div>
                            <div className='col-6 pl-0'>
                              <div onClick={() => go('InfoProduct', {
                                productId: valueI.id,
                                urlBack: 'ResultFilter'
                              })}
                                   className='blockTitleBouquet mt-2'>
                                                            <span
                                                              className='titleListBouquet mt-2'>{valueI.title.length > 25 ?
                                                              valueI.title.slice(0, 25).replace(/&quot;/g, '"') + '...' : valueI.title.replace(/&quot;/g, '"')}</span>
                                <br/>
                                <span className='rating'>{valueI.rating}
                                  <i className="material-icons ratingStar">
                                                                        star_rate
                                                                    </i>
                                                                </span>
                              </div>


                              <div className='d-flex align-items-center mt-3'>
                                                                    <span
                                                                      className='newPrice font-weight-bold'>{Math.round(valueI.new_price).toLocaleString()}₽</span>
                                {valueI.new_price !== valueI.price && <div
                                  className='oldPrice ml-2 font-weight-bold'>{Math.round(valueI.price).toLocaleString()}₽</div>}
                              </div>


                              {checkLocalStorage('token') && checkLocalStorage('userId') &&
                              <div onClick={() => this.sendFavorites(valueI.id, indexI)}
                                   className='w-100 footerCard footerScroll d-flex'>
                                <div
                                  className='roundLike mt-2 d-flex justify-content-center'>
                                  {valueI.favorites === 0 ?
                                    <Icon16LikeOutline className='styleLike'/> :
                                    <Icon16Like className='styleActiveLike'/>
                                  }
                                </div>
                              </div>
                              }

                            </div>
                          </div>
                        </Div>
                        {(indexI === this.state.limit - 1) &&
                        <div className='w-100 ml-3 mr-3'>
                          <div
                            className='col-12 d-flex justify-content-center w-100'>
                            <button onClick={this.moreBouquet}
                                    className='showMoreBouquet p-2'>
                              Смотреть ещё
                            </button>
                          </div>
                          <div className='divLine mb-3'/>
                        </div>
                        }

                      </Fragment>
                    ))
                  }
                </div>


              </Div>
            </div>

          </div>
        </Panel>


    );
  }
}

ResultFilter.propTypes = {
  id: PropTypes.string.isRequired,
  go: PropTypes.func.isRequired
};

export default (connect(
  state => ({
    search: state.main.search,
    filter: state.main.filter
  }),
  dispatch => ({
    onSetSearch: (value) => {
      dispatch(setSearch(value));
    },
    onSetFilter: (value) => {
      dispatch(setFilter(value));
    }
  })
)(ResultFilter));