import {
    inject,
    observer
} from "mobx-react";
import { WeaLocaleProvider, WeaTagGroup, WeaTextarea, WeaDialogFooter } from "ecCom";
import { toJS } from "mobx";
import { Button } from "antd";
import "../../style/sendBless.less";
import { i18n } from "../../public/i18n";
import {addContentPath} from '../../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmSendBless')
@observer
export default class SendBless extends React.Component {
    componentDidMount() {
        const { hrmSendBless: { getBlessingForm, setQueryDatas ,handleImgClick,prefixUrl}, location: { query } } = this.props;
        setQueryDatas(query);
        getBlessingForm();
        handleImgClick(`${prefixUrl}1.png`)
    }

    getParams = (params) => {
        if (typeof params == 'object') {
            return Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
        }
    }

    render() {
        const {
            hrmSendBless: {
                greetingCardShow,
                handleImgClick,
                canPrev,
                canNext,
                prev,
                next,
                handleTagGroupChange,
                tagGroupDatas,
                browserConditionParam,
                blessOptions,
                addBlessTarget,
                dovalidate,
                checkAll,
                sendBless,
                handleTextareaChange,
                blessing,
            }
        } = this.props;

        return (
            <div className="hrmBless">
                <div>
                    <p>{`${i18n.label['528857']()}: `}</p>
                    <i className={`icon-coms-Left${!canPrev ? " disabled" : ""}`} onClick={() => canPrev && prev()}/>
                    <div>
                        {greetingCardShow.map(data => <img src={addContentPath(data.url)} onClick={() => handleImgClick(data.url)} className={data.isChecked ? "img-checked" : ""}  alt="" />)}
                    </div>
                    <i className={`icon-coms-Right${!canNext ? " disabled" : ""}`} onClick={() => canNext && next()}/>
                </div> 
                <div>
                    <WeaTagGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaTagGroup@5scvtu`}    
                        datas={toJS(tagGroupDatas)}
                        url={`/api/public/browser/complete/birthdayResource?${this.getParams(browserConditionParam.completeParams)}`}
                        hasBrowser={false} 
                        type="birthdayResource" 
                        label={`${i18n.label['528858']()}: `} 
                        browserParams={browserConditionParam}
                        onChange={handleTagGroupChange}
                        validate={dovalidate}
                        isTag={false}
                    />
                    { (blessOptions.length > 0) && (
                        <p className="blessOptions">
                            { blessOptions.slice(0, 3).map(option => <span onClick={() => addBlessTarget(option)}>{option.name}</span>) }
                            <span className="suffix">{i18n.label['528859']().replace(/\{(placeholder|holder)\}/,'').replace("{number}",blessOptions.length)}</span>
                            <span onClick={checkAll}>{i18n.label['528860']()}</span>
                        </p>
                    ) }
                </div>
                <div className="blessInput">
                    <p>{`${i18n.label['528861']()}: `}</p>
                    <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@ifspuc`} 
                        value={blessing}
                        minRows={4}
                        maxRows={4}
                        onChange={handleTextareaChange}
                    />
                </div>
                <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@a6m8pg`} buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mo8jdw@0`} type="primary" onClick={sendBless}>{i18n.label['528862']()}</Button>]} moreBtn={{}}/>
            </div>
        );
    }
}