import React from 'react';
import ReactDOM from 'react-dom';
import { Toast, Mask, Img } from 'cbkfe-ui';
import {
    createCollect,
    requestCollectList,
    requestAddCollect,
    requestCancelCollect
} from './action';
import './style';

/**
 * 采集弹窗
 * @param {boolean} isShow 是否显示
 * @param {array} collectList 收集列表
 * @param {function} callback 回调函数, 底部弹窗动画结束后执行
 * @param {function} callbackImmediately // 立即回调函数 不用等底部弹窗动画结束 接收状态 ADD REMOVE
 */
export default class CollectModal extends React.Component {
    state = {
        isCollectListShow: true,    // 是否展示采集列表
        isTipsShow: false,
        inputContent: '',
        start: 0,
        limit: 50,
        albumList: [],
        albumUrl: '',
        title: '',
        isLoad: false,
        hideTag: false
    }

    componentDidMount() {
        const { choosedPlace, callback, isShow } = this.props;
        const { start, limit } = this.state;
        const tipEl = document.querySelector('.collect-tips');

        isShow && choosedPlace && requestCollectList({ start, limit, placeId: choosedPlace.placeId }).then(res => {
            this.setState({
                albumList: res.albumList,
                isLoad: true,
            });
        }).catch(() => {
            callback && callback();
        });

        tipEl && tipEl.addEventListener('animationend', function (e) {
            callback && callback();
        }, false);
    }

    /**
     * 采集
     */
    handleCollectClick = (item) => {
        const { choosedPlace, callback, callbackImmediately } = this.props;
        const { albumId, title, hasAlbum, url } = item;

        if (hasAlbum) {
            requestCancelCollect({
                placeId: choosedPlace.placeId,
                albumId
            }).then(() => {
                callbackImmediately && callbackImmediately('REMOVE');
                callback && callback();
            }).catch(err => {
                Toast(err.message || '系统异常', 2);
                callback && callback();
            });
        } else {
            requestAddCollect({
                placeId: choosedPlace.placeId,
                albumId
            }).then(() => {
                callbackImmediately && callbackImmediately('ADD');
                this.setState({
                    title,
                    albumUrl: url
                }, () => {
                    this.setState({
                        isTipsShow: true
                    });
                });
            }).catch(err => {
                Toast(err.message || '系统异常', 2);
                callback && callback();
            });
        }
    }

    /**
     * 新建采集单
     */
    handleCreate = () => {
        const { choosedPlace, callback, callbackImmediately } = this.props;
        let { inputContent } = this.state;
        const { placeId, images } = choosedPlace;
        inputContent = inputContent.replace(/(^\s*)|(\s*$)/g, '');      // 前后去空

        if (!inputContent) {
            return false;
        }
        createCollect({ title: inputContent, placeId, image: images[0] }).then(res => {
            callbackImmediately && callbackImmediately('ADD');
            this.setState({
                title: inputContent,
                albumUrl: res.albumUrl,
            }, () => {
                this.setState({
                    isTipsShow: true
                });
            });
        }).catch(err => {
            Toast(err.message || '系统异常', 2);
            callback && callback();
        });
    }

    handleBackClick = () => {
        this.setState({
            inputContent: '',
            isCollectListShow: true
        });
    }

    // 采集弹窗
    renderCollectModal = (isCollectListShow, albumList, inputContent) => {
        const { handleMaskClick } = this.props;

        return <div className="collectmodal-container" style={{ opacity: this.state.isLoad ? 1 : 0 }}>
            <div className={`collectmodal-header ${isCollectListShow ? 'collectmodal-header-list' : ''}`}>
                <h3 className="collectmodal-title">{isCollectListShow ? '采集到采集单' : '添加采集单'}</h3>
                {!isCollectListShow && <div className="collectmodal-icon-back" onClick={this.handleBackClick} />}
                {isCollectListShow
                    ? <div className="collectmodal-icon collectmodal-icon-close" onClick={handleMaskClick} />
                    : <div className={`collectmodal-icon ${inputContent ? 'collectmodal-icon-right-active' : 'collectmodal-icon-right'}`} onClick={this.handleCreate} />
                }
            </div>

            <div className="collectmodal-content" id="collectmodal-list-id">
                <div className={`collectmodal-list ${isCollectListShow ? '' : 'collectmodal-list-hide'}`}>
                    <div className="collect-item-new" onClick={() => {
                        this.setState({ isCollectListShow: false });
                    }}>
                        采集到采集单
                    </div>
                    {albumList && albumList.map((item, index) => {
                        return <div key={index} className="collect-item" onClick={() => {
                            this.handleCollectClick(item);
                        }}>
                            <div className="collect-item-img">
                                <Img url={item.image} size="c150" />
                            </div>
                            <p className="collect-item-title">{item.title}</p>
                            <p className="collect-item-num">{item.placeCount ? `x${item.placeCount}` : ''}</p>
                            <div className={`collect-item-select ${item.hasAlbum ? 'collect-item-selected' : ''}`} />
                        </div>;
                    })}
                </div>
                <div className={`newcollect-input-wrap ${isCollectListShow ? '' : 'newcollect-input-wrap-show'}`}>
                    <input
                        key={!isCollectListShow}
                        className="newcollect-input"
                        placeholder="输入行程单名称（1-16个字符）"
                        // autoFocus={!isCollectListShow} 直接设置有抖动，可在动画结束后设置
                        onChange={e => {
                            this.setState({
                                inputContent: e.target.value
                            });
                        }}
                        onBlur={() => {
                            document.body.scrollTop = document.body.scrollTop || 0;
                        }}
                    />
                </div>
            </div>
        </div>;
    }

    renderTip = (isShow, isTipsShow, title, albumUrl, hideTag) => {
        if (hideTag) {
            return null;
        }
        const { callback } = this.props;
        return <div
            key={isShow + '2'}
            className={`collect-tips ${isTipsShow ? 'collect-tips-show' : 'collect-tips-hidden'}`}
            onClick={() => {
                if (albumUrl) {
                    this.setState({ hideTag: true }, () => {
                        callback && callback();
                        location.href = albumUrl;
                    });
                } else {
                    return false;
                }
            }}
        >
            <span className="collect-tips-big">已采集</span>
            <span className="collect-tips-common"><span className="collect-tips-unit">至</span>[{title}</span>
            <span className="collect-tips-common collect-tips-common-end">]</span>
            <i className="iconfont regular-labels__arrowRight"></i>
        </div>;
    }

    render() {
        const { isShow, handleMaskClick } = this.props;
        const { albumList, isCollectListShow, isTipsShow, title, albumUrl, inputContent, hideTag } = this.state;

        return [
            <Mask
                key={isShow + '1'}
                isShow={isShow && !isTipsShow}
                maskClick={handleMaskClick}
                useFadeInOut={true}
                needScrollId="collectmodal-list-id"
            >
                {this.renderCollectModal(isCollectListShow, albumList, inputContent)}
            </Mask>,
            ReactDOM.createPortal(this.renderTip(isShow, isTipsShow, title, albumUrl, hideTag), document.querySelector('body'))
        ];
    }
}