import { customConfig } from '../actions/action_constants';
import { authHeader } from '../helpers/authHeader';

export const vendorService = {
  getAllVendors,
};


function getAllVendors() {
  const requestOptions = {
    method: 'GET',
    headers: authHeader(),
  };
  let url = `${customConfig.API_URL}api/vendors/all?page=1&size=50`;
  return fetch(url, requestOptions).then(handleResponse);
}


  //This is the end point

export function getAllVendors() {
  return dispatch => {
    dispatch(request());
    vendorService.getAllVendors().then(payload => dispatch(success(payload)), error => dispatch(failure(error.toString())));
  };

  function request() {
    return { type: 'FETCH_All_VENDORS_START' };
  }
  function success(payload) {
    return { type: 'FETCH_All_VENDORS_FULLFILLED', payload };
  }
  function failure(error) {
    return { type: 'FETCH_All_VENDORS_REJECTED', error };
  }
}


//This is the component
import React, { Component } from 'react';
import './../admin/Admin.css';
import './../admin/pages/Pages.css';
import { withRouter, Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import { Modal, ModalBody } from 'reactstrap';
import { CSVLink } from 'react-csv';
import { fetchAllVendors, getAllVendors, updateCreateVendor } from '../../actions/OwnerActions/OwnerVendorMgtActions/OwnerVendorActions';
import Loader from '../../Loader';
import SuccessModal from '../ownerModule/subcomponents/successModal';
import UnSuccessModal from '../ownerModule/subcomponents/unsuccessfulModal';

const trailImg = require('../../assets/Trail.svg');
const card1Img = require('../../assets/Card 1.svg');
const delcardImg = require('../../assets/Delete card.svg');
const delicoImg = require('../../assets/delete.svg');

const rboxImg = require('../../assets/rectbox.png');
const dboxImg = require('../../assets/user1.png');
const boxImg = require('../../assets/box.png');

class OVendors extends Component {
  constructor(props) {
    super(props);
    this.state = {
      successModalActive: 0,
      modalMessage: '',
      loggedInUser: null,
    };

    this.toggleCardEditModal = this.toggleCardEditModal.bind(this);
    this.toggleCardDeleteModal = this.toggleCardDeleteModal.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      loggedInUser: JSON.parse(localStorage.getItem('user')),
    });
    if (nextProps.createVendorRequestStatus !== this.props.createVendorRequestStatus) {
      if (nextProps.createVendorRequestStatus === 1) {
        this.setState({
          modalMessage: nextProps.createVendorRequestMessage,
          successModalActive: 1,
        });
      }
      if (nextProps.createVendorRequestStatus === 2) {
        this.setState({
          modalMessage: nextProps.createVendorRequestMessage,
          successModalActive: 2,
        });
      }
    }
  }
  componentDidMount() {}

  updateActiveModalFn(modalStatus) {
    // this.setState({
    //   successModalActive: modalStatus,
    // });
    this.props.updateCreateVendorFn(modalStatus);
  }

  // updateActiveModalFn(modalStatus) {
  //   this.setState({
  //     successModalActive: modalStatus,
  //   });
  // }

  toggleCardEditModal() {
    this.setState({
      cardEditModal: !this.state.cardEditModal,
    });
  }
  toggleCardDeleteModal() {
    this.setState({
      cardDeleteModal: !this.state.cardDeleteModal,
    });
  }
  componentWillMount() {
    this.props.getAllVendorsFn();
  }

  render() {
    let { allVendors } = this.props,
      list = allVendors.data ? allVendors.data : [],
      vendorList =
        list.length !== undefined
          ? list.map(e => {
              return (
                <div key={e.id} className="col-md-6 mt-md-3">
                  <Link to={'/owner-admin/vendors/vendor-details/' + e.id}>
                    <div className="card pb-3">
                      <div className="card-title mt-md-3 " style={{ overflow: 'hidden !important' }}>
                        {e.image == null ? (
                          <img alt="" src="" className="rounded-circle profile-pic" />
                        ) : (
                          <img alt="" src={e.image} width="110%" className="rounded-circle profile-pic-img" />
                        )}

                        <span src="" className="ml-md-2 mt-md-2 " style={{ maxWidth: '60%', display: 'block' }}>
                          {/* <img alt="" src={oandoimg1} width="85%" /> */}
                          <p className="header7 ">{e.name}</p>
                          <p className="no-spaces">
                            <small>{e.sector}</small>
                          </p>
                          <p className=" neg-top-margin">{e.number}</p>
                        </span>
                      </div>
                      <div className="card-body pb-3">
                        <div className="title">
                          {/* <img alt="" src={productsImg1} width="27%" /> */}
                          <p className="header3">Products</p>
                        </div>
                        {e.products.length ? (
                          (e.products.length < 5 &&
                            e.products.map(p => {
                              return (
                                <span className="badge badge-pill badge-light" style={{ maxWidth: '20px', overflow: 'hidden' }}>
                                  {p.name}
                                </span>
                              );
                            })) ||
                          (e.products.length >= 5 &&
                            e.products.slice(0, 5).map(p => {
                              return (
                                <span className="badge badge-pill badge-light" style={{ maxWidth: '20px', overflow: 'hidden' }}>
                                  {p.name}
                                </span>
                              );
                            }) && (
                              <Link to={'/owner-admin/vendor/' + e.id + '/vendor-products'}>
                                <small>See all products</small> <strong style={{ fontSize: '20px ' }}> -</strong>
                              </Link>
                            ))
                        ) : (
                          <Link to={'/owner-admin/vendor/' + e.id + '/vendor-products'}>
                            <small>No Products</small> <strong style={{ fontSize: '20px ' }}> + </strong>
                          </Link>
                        )}

                        <p style={{ fontSize: '10px', marginTop: '1em' }}>
                          <span style={{ fontWeight: 'bold' }}>Status:</span> {e.status}
                        </p>
                      </div>
                    </div>
                  </Link>
                </div>
              );
            })
          : [];
    const { loggedInUser } = this.state;
    return (
      <div className="Admin Voucher pl-md-5">
        {/* <Loader toggle={this.props.fetching} /> */}
        <div className="col-md-12">
          <div className="pl-md-5 pt-md-4 container">
            <div className="row mt-md-4">
              <div className="col-md-7">
                <ul className="breadcrumbs">
                  <li>
                    <p className="header6">Vendors</p>
                  </li>
                </ul>
              </div>
              <div className="col-md-5">
                <div className="search-bar shadow-sm bg-white">
                  <input className="p-1" ref="search" type="text" name="search" />
                  <span className="search-icon" />
                </div>
              </div>
            </div>
            <div className="row section-two">
              <div className="col-md-4">
                <ul className="sub-sidebar">
                  {loggedInUser && loggedInUser.permissions.length && loggedInUser.permissions.includes('VIEW_VENDORS') && (
                    <NavLink to="/owner-admin/vendors/" activeClassName="active">
                      <li>View vendors</li>
                    </NavLink>
                  )}
                  {/* <NavLink to="/owner-admin/vendors/" activeClassName="active">
                    <li>View vendors</li>
                  </NavLink> */}
                  <Link to="/owner-admin/vendors/create">
                    <li>Create new vendor</li>
                  </Link>
                </ul>
                <div className="cardv-container">
                  <img src={boxImg} width="120%" className="cardv" height="300px" alt="vendors" />
                  <div className="absol-container">
                    <p>Total</p>
                    <div className="sub">
                      <p>
                        {/* {activeVouchers.length}  */}
                        {list.length}
                        <small className="mt-md-3"> vendors</small>
                      </p>
                    </div>
                    <p>
                      Actve
                      <strong>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {list.length && list.filter(e => e.status === 'ACTIVE').length}
                      </strong>
                    </p>
                    <p>
                      Suspended&nbsp;&nbsp;&nbsp;<strong>{list.length && list.filter(e => e.status === 'DISABLED').length}</strong>
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-md-8">
                {/* <div className="fixed-content-height ">
                  <div className="row section-one">{vendorList}</div>
                </div> */}
                {vendorList.length >= 1 && (
                  <div className="fixed-content-height ">
                    <div className="row section-one Cardlist">{vendorList}</div>
                  </div>
                )}
                {vendorList.length < 1 && this.props.fetching && (
                  <div className="fixed-content-height ">
                    <div className="row section-one Cardlist" style={{ marginLeft: 15 }}>
                      Vendor loading...
                    </div>
                  </div>
                )}
                {vendorList.length < 1 && this.props.fetching === false && (
                  <div className="fixed-content-height ">
                    <div className="row section-one Cardlist">An error occured</div>
                  </div>
                )}
                {vendorList.length < 1 && (
                  <div className="fixed-content-height ">
                    <div className="row section-one Cardlist">No Vendor found</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
        {this.props.createVendorRequestStatus === 1 ? (
          <SuccessModal updateActiveModal={this.updateActiveModalFn.bind(this)} modalMessageProp={this.props.createVendorRequestMessage} />
        ) : null}
        {/* {this.state.successModalActive === 2 ? (
          <UnSuccessModal updateActiveModal={this.updateActiveModalFn.bind(this)} modalMessageProp={this.state.modalMessage} />
        ) : null} */}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    selectedUser: state.customerUser.selectedUser,
    allVendors: state.oVendorReducer.allVendors,
    fetching: state.oVendorReducer.fetching,
    createVendorRequestStatus: state.oVendorReducer.createVendorRequestStatus,
    createVendorRequestMessage: state.oVendorReducer.createVendorRequestMessage,
    //   userCreateModal:state.customerUser.userCreateModal
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getAllVendorsFn: () => {
      dispatch(getAllVendors());
    },
    updateCreateVendorFn: d => {
      dispatch(updateCreateVendor(d));
    },
  };
};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(OVendors),
);