my-lots

const Editor = require("../../../../../react/Mixins/Editor");
const moment = require("moment");
const Platform = require("platform-react");
const React = require("react");
const Slider = require("react-slick").default;

/**
 * HyperBolts ϟ (https://hyperbolts.io)
 *
 * Copyright © 2015-present Pace IT Systems Ltd.
 * All rights reserved.
 *
 * @author  Pace IT Systems Ltd
 * @license MIT
 */

module.exports = React.createClass({
  mixins: [Editor, Platform.connect("api/user/lots"), Platform.cacheable()],

    // Set initial state
    getInitialState() {
            return {
                auctionDate: '',
                quickSearch: '',
                currentPage: 1
            };
    },

    // Handle auction date change
    handleAuctionDateChange(event) {
        this.setState({
            auctionDate: event.target.value
        });
    },

    // Handle search
    handleSearchChange(event) {
        // Update state with search value
        this.setState({
            quickSearch: event.target.value
        });
    },

    // Handle page change
    handlePageChange(event) {
        this.setState({
            currentPage: event.target.id
        })
    },

    // Render auction date dropdown list
    renderAuctionDropdown(lots) {
        let options = [];

        // Loop to get distinct auction dates
        for (let i = 0; i < lots.length; i++) {
            if (options[lots[i].allsop_auction.allsop_auctiondate]) continue;
            options[lots[i].allsop_auction.allsop_auctiondate] = true;
            options.push(lots[i].allsop_auction.allsop_auctiondate);
        }

        // Return options
        return options.map((option, i) => {
            return <option key={i} value={option}>{moment(option).format('dddd Do MMM YYYY')}</option>
        });
    },

    // Render lot features list
    renderLotFeatures(featuresArray) {
        const features = featuresArray || [];

        // Return if we have no features
        if (features.length === 0) {
        return null;
        }

        return features.map((feature, i) => {
            return <li key={i}>{feature.value}</li>;
        });
    },

    // Render menu buttons
    renderLotDetails(lotsArray) {

        lotsArray = lotsArray || [];

        // Filter results if we have a search term
        const lots = lotsArray.filter((lot) => {

            // Convert to lowercase for comparison
            const lotName = lot.allsop_name.toLowerCase();

            // Format address for search
            const address = [
                lot.allsop_propertyname,
                lot.allsop_propertyaddress1 ,
                lot.allsop_propertyaddress2,
                lot.allsop_propertyaddress3,
                lot.allsop_propertycounty,
                lot.allsop_propertypostcode
            ].filter(val => val).join(' ').toLowerCase();

            // Check if we have search value
            if (this.state.quickSearch !== undefined && this.state.quickSearch !== '') {
                // Return true if we have a match
                if (lotName.indexOf(this.state.quickSearch) > -1 || address.indexOf(this.state.quickSearch.toLowerCase()) > -1) {
                    return true;
                }

                return false;
            }

            // Check if we have auctionDate value
            if (this.state.auctionDate !== undefined && this.state.auctionDate !== '') {
                // Return true if we have auction date match
                if (lot.allsop_auction.allsop_auctiondate === this.state.auctionDate) {
                    return true;
                }

                return false;
            }

            return true;
        });

        // Return parsed articles
        return lots.map((lotDetails, i) => {

            const auction = lotDetails.allsop_auction || {};
            let lotRef, lotType, label;

            // Use lotnumber or allsop name
            if (lotDetails.allsop_lotnumber) {
                 lotRef = lotDetails.allsop_lotnumber;
            } else {
                 lotRef = lotDetails.allsop_name;
            }

            // Commercial or Resi
            switch (lotDetails.allsop_name[0]) {
                case "R":
                    lotType = "Residential";
                break;
                case "C":
                    lotType = "Commercial";
                break;
            }

            // Format address for display
            const address = [
                lotDetails.allsop_propertyname,
                lotDetails.allsop_propertyaddress1 ,
                lotDetails.allsop_propertyaddress2,
                lotDetails.allsop_propertyaddress3,
                lotDetails.allsop_propertycounty,
                lotDetails.allsop_propertypostcode
            ].filter(val => val).join(', ');

            // Format labels
            if (lotDetails.reserve === null) {
                label = <span className="label label-danger __small">No Reserve</span>;
            }

        // Return the images
        return (
            <div
            className={`__lot_container ${"__" + lotType.toLowerCase()}`}
            key={i}
            >
            <div className="__lot_wrapper">
                <div className="__lot_image">
                <a href="#">
                    <div className="__tag">{lotType + " - " + lotRef}</div>
                    <img
                    src={
                        Platform.getAssetBase() +
                        "images/packages/platform/frontend/demo/lot-image-43.jpg"
                    }
                    className="img-responsive"
                    />
                </a>
                <div className="__lot_info __price">
                    <div className="__price_wrapper">
                    {label}
                    <span className="text-uppercase __f_s_12">Guide Price</span>
                    <h3 className="__m_0 __bold __lot_price">
                        {lotDetails.guide_price_text}
                        <small>{lotDetails.yield}</small>
                    </h3>
                    </div>
                </div>
                </div>
                <div className="__lot_info_section">
                <div className="__extra_info">
                    <span className={lotDetails.featuredClass}>
                    {lotDetails.featuredText}
                    </span>
                    <span className="__lot_address">{address}</span>
                </div>
                <div className="__lot_description">
                    <div className="__info_header __clear">
                    <span
                        className={`label __label_status ${lotDetails.statusColour}`}
                    >
                        <i className={lotDetails.statusIcon} />
                        {lotDetails.statusText}
                    </span>
                    <h4 className="__bold h5">
                        {lotDetails.allsop_propertybyline}
                    </h4>
                    </div>
                    <div>
                    <ul>{this.renderLotFeatures(lotDetails.features)}</ul>
                    Current Rent Reserved<br />
                    £24,000 pa<br />
                    SIX WEEK COMPLETION AVAILABLE
                    </div>
                </div>
                <div className="__lot_bottom_section visible-xl">
                    <div className="__bottom_info btn-group btn-group-justified">
                    <div className="__lot_info btn">
                        <i className="icon-placeholder" />
                        {lotDetails.allsop_propertytown}
                    </div>
                    <div className="__lot_info btn">
                        <a href="#">
                        <i className="icon-calendar2" />
                        Auction Date:{" "}
                        {moment(auction.allsop_auctiondate).format(
                            "dddd Do MMM YYYY"
                        )}
                        </a>
                    </div>
                    <div className="__lot_info btn">
                        <a href="lot-overview">
                        <i className="icon-info" />
                        View Lot Details
                        </a>
                    </div>
                    <div className="__lot_info btn">
                        <a href="#">
                        <i className="icon-note" />
                        Add Note
                        </a>
                    </div>
                    <div className="__lot_info btn">
                        <a href="#">
                        <i className={lotDetails.actionButtonIcon} />
                        {lotDetails.actionButtonText}
                        </a>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            <div className="__lot_bottom_section hidden-xl">
                <div className="__bottom_info btn-group btn-group-justified">
                <div className="__lot_info btn hidden-sm hidden-md">
                    <i className="icon-placeholder" />
                    {lotDetails.location}
                </div>
                <div className="__lot_info btn hidden-sm">
                    <a href="#">
                    <i className="icon-calendar2" />
                    {lotDetails.auction}
                    </a>
                </div>
                <div className="__lot_info btn">
                    <a href="lot-overview">
                    <i className="icon-info" />
                    View Lot Details
                    </a>
                </div>
                <div className="__lot_info btn">
                    <a href="#">
                    <i className="icon-note" />
                    Add Note
                    </a>
                </div>
                <div className="__lot_info btn">
                    <a href="#">
                    <i className={lotDetails.actionButtonIcon} />
                    {lotDetails.actionButtonText}
                    </a>
                </div>
                </div>
            </div>
            </div>
        );
        });
    },

    renderPageNumbers(totalPages, currentPage) {
        const pageNumbers = [];

        // Loop to create page numbers
        for (let i = 0; i < totalPages; i++) {

            let activeClass = '';

            // Set active class
            if (i == currentPage - 1) {
                activeClass = 'active';
            }

            pageNumbers.push(
                <li key={i} className={activeClass}>
                    <a id={i+1} onClick={this.handlePageChange}>{i+1}</a>
                </li>
            );
        }

        return pageNumbers;
    },

    render() {
        const data = this.props.data;
        const apiData = this.state || {};
        const lots = apiData.lots || [];
        let lotsSpliced = [];
        const size = 2;

        // Loop to split lots into chunks
        while (lots.length > 0) {
            lotsSpliced.push(lots.splice(0, size));
        }

        // Store total page count
        const totalPages = lotsSpliced.length;

        let currentPage = this.state.currentPage - 1;

        console.log(currentPage);
        console.log(lotsSpliced);

        return (
            <div>
                <div className="__section __p_b_30">
                    <div className="container-fluid">
                        <h3 className="display-3 __m_0 __p_b_30" data-editable="pageTitle">
                        {data.pageTitle}
                        </h3>
                        <div className="row __filters">
                        <div className="col-md-4">
                            <div className="__filter_box">
                                <div className="form-group">
                                    <label className="control-label">Keywords</label>
                                    <input className="form-control" type="text" onChange={this.handleSearchChange} />
                                </div>
                            </div>
                        </div>
                        <div className="col-md-4">
                            <div className="__filter_box">
                                <div className="form-group">
                                    <label className="control-label">Auction Date</label>
                                    <select className="form-control" onChange={this.handleAuctionDateChange}>
                                        <option value="">Please Select</option>
                                        {this.renderAuctionDropdown(lots)}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div className="col-md-4">
                            <div className="__filter_box">
                                <div className="form-group">
                                    <label className="control-label">Lot Status</label>
                                    <select className="form-control">
                                    <option>Please Select</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div className="__section __p_b_0 __p_t_30 __border_top __bg_grey">
                    <div className="container-fluid">
                        <div className="__results_options __clear">
                        1-8 of 15 Results
                        <span className="__v_sep" />
                        <span>
                            View:
                            <select className="form-control __no_border">
                                <option>8</option>
                            </select>
                        </span>
                        <span className="pull-right">
                            Sort By:
                            <select className="form-control __no_border">
                                <option>Newest</option>
                            </select>
                        </span>
                        </div>
                        <div>
                        <div className="__list_view">{this.renderLotDetails(lotsSpliced[this.state.currentPage - 1])}</div>
                        </div>
                        <ul className="pagination">
                            <li className="disabled">
                                <a href="#">
                                <i className="fa fa-angle-left" />Previous
                                </a>
                            </li>
                           {this.renderPageNumbers(totalPages, this.state.currentPage)}
                            <li>
                                <a href="#">
                                Next<i className="fa fa-angle-right" />
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
        </div>
        );
    }
});