import { Button } from 'antd'
import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaRightMenu, WeaTop } from 'ecCom'
import { inject, observer } from 'mobx-react'
import { i18n } from '../../public/i18n'
import '../../style/serialNumber.less'
import NumberComposition from './NumberComposition'
import NumberFlowRule from './NumberFlowRule'
import { StartReservedNumberSet } from './StartReservedNumberSet'
import {Authority}  from '../../public/valhalla/components/index.js'

@inject('postNumberSettingStore')
@observer
export default class PostNumberSet extends React.Component {
    componentWillReceiveProps(nextProps) {
        if (this.props.location.key != nextProps.location.key) {
            const { postNumberSettingStore: { init } } = this.props
            init()
        }
    }
    
    componentDidMount() {
        const { postNumberSettingStore: { init } } = this.props
        init()
    }

    render() {
        const { postNumberSettingStore } = this.props
        const { dropMenuDatas, hasNumberComposition, hasNumberFlowRule, hasStartReservedNumberSet, handleSave, authorityStore } = postNumberSettingStore
        return (
            <Authority store={authorityStore}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@u2uaal`} datas={dropMenuDatas} >
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@3noldt`}
                        showDropIcon
                        title={i18n.label.postNumberSet()}
                        icon={<i class='icon-coms-hrm' />}
                        iconBgcolor='#217346'
                        buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@djec9t`} type='primary' onClick={handleSave}>{i18n.button.save()}</Button>]}
                        dropMenuDatas={dropMenuDatas}
                    >
                        <GenerationSwitch ecId={`${this && this.props && this.props.ecId || ''}_GenerationSwitch@k6romu`} store={postNumberSettingStore} />
                        {hasNumberComposition && <NumberComposition ecId={`${this && this.props && this.props.ecId || ''}_NumberComposition@r9r1va`} store={postNumberSettingStore} />}
                        {hasNumberFlowRule && <NumberFlowRule ecId={`${this && this.props && this.props.ecId || ''}_NumberFlowRule@9gz5b3`} store={postNumberSettingStore} />}
                        {hasStartReservedNumberSet && <StartReservedNumberSet ecId={`${this && this.props && this.props.ecId || ''}_StartReservedNumberSet@bk7zph`} store={postNumberSettingStore} />}
                    </WeaTop>
                </WeaRightMenu>
            </Authority>
        );
    }
}

@observer
class GenerationSwitch extends React.Component {
    render() {
        const { store: { generationSwitchChecked, handleGenerationSwitchChange } } = this.props
        const helpfulTip = (
          <div>{['531684', '531685', '531686', '531687'].map(n => <p>{i18n.label[n]()}</p>)}</div>
        )
        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@t5jpvl`}
                label={i18n.label.postNumberAutoGenerate()}
                ratio1to2
                className='generationSwitch'
            >
                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@671eeo`} display='switch' value={generationSwitchChecked} onChange={handleGenerationSwitchChange} />
                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@on6oqi`} title={helpfulTip} />
            </WeaFormItem>
        );
    }
}