import * as React from 'react';
import SimpleList, { OptionsType } from './components/simpleList/index'
import AdvancedCmpt from './components/advancedCmpt/index'
import Modal from '@beisen-phoenix/modal'
import {getUpdateData} from './util.js'
import isEmpty from 'lodash/isEmpty'

//简单列表滚动加载，默认显示50条,可配置
//多语言

//展示模式
export type lookMode = 'simple' | 'advanced';

//高级模式属性
export type advanceProps = {
    searchFormMeta?: any;                 //searchForm的数据描述
    tableMeta?: any;                      //table的数据描述
    advMetaParam?: Object;                //请求advMetaUrl时，发送的数据
    advMetaUrl?: string | Function;       //form和table的元数据请求接口
    advFormatListData: Function;          //格式化table数据
    advFormatMetaData?: Function;           //格式化Meta数据,searchform和table描述数据
    advanceSearchUrl?: string;            //searchform改变后，发送获取table数据的请求url
    advanceSearchFunction?: Function;     //searchform改变后，回调函数
    dlgTitle?:  string;                   //高级弹窗标题
    modalSize?: string;                   //高级弹窗大小
    modalHeight?: string;                 //高级弹窗高度
    maxSize?:  number;                    //多选模式下，最大选择数量
    tablePrimaryKey?: string;             //table的主键
}

export interface LookupProps {
    mode?: lookMode;                   //显示模式
    multiple?: boolean;                //是否多选
    moreText?: string;                 //自定义查看更多显示标题
    btnOkText?: string;                //自定义按钮名称
    isAdvanceSearchVbl?: boolean;      //在简单模式下是否显示全部查找按钮
    customCls?: boolean;               //自定义样式
    isSearchBox?: boolean;             //是否有搜索框
    isAvator?: boolean;                //是否显示头象
    options?: OptionsType[];           //列表数据
    selectValue?: OptionsType[];       //选中值列表
    onSearchChange?: Function;         //搜索方法
    onConfirm?: Function;              //组择触发方法(简单模式、高级模式确定选择项触发）
    onCancel?: Function;               //取消选择触发
    searchUrl?: string;                //简单模式请求url
    formatData?: Function;             //数据格式化接口
    onVisibleChange?: Function;        //组件显示回调
    advancedVbl?: boolean;             //高级模式显示控制
    advanceParam?: advanceProps;       //高级组件需要的属性
    autoFocus?: boolean;               //简单模式，输入自动获得焦点
    translation?: {clearSelected: string, selected: string, emptyMsg: string, moreText: string, noDataText: string, btnOkText: string}
}

export default class Lookup extends React.Component<LookupProps, any> {

    private modalRef: any = React.createRef()

    // 默认配置
    static defaultProps = {
        mode: 'simple',
        multiple: false,
        autoFocus: true,
        translation: {clearSelected: "清空已选",selected: "已选", emptyMsg: "请在左侧选择内容",
                moreText: '全部查找', noDataText: '这里什么都没有', btnOkText: '确定',
                confirmText: '确定', cancelText: '取消'}
    };

    private advancedRef: any = React.createRef()

    constructor(props) {
        super(props);
        this.state={
            options: props.options,
            mode: props.mode,
            advancedModalVbl: props.advancedModalVbl || false,
            selectValue: []
        }
    }

    componentDidUpdate (prevProps, prevState, snapshot) {
        let prop = getUpdateData(['selectValue','options', 'mode'], this.props, prevProps)
        if (!isEmpty(prop)) {
            this.setState(prop)
        }
    }

    onSearchAllClick = (selectValue) => {
        const { advanceParam } = this.props
        if (advanceParam) {
            this.setState({mode: 'advanced', advancedModalVbl: true, selectValue: selectValue})
        }
    }

    renderSimpleList = () => {
        const { isSearchBox, isAvator, multiple, isAdvanceSearchVbl, options, selectValue, onConfirm, onSearchChange, formatData, searchUrl, autoFocus, translation} = this.props

        return <SimpleList
            isSearchBox={isSearchBox}
            isAvator={isAvator}
            multiple={multiple}
            isAdvanceVbl={isAdvanceSearchVbl}
            options={options}
            selectValue={selectValue}
            onSearchAllClick={this.onSearchAllClick}
            onSearchChange={onSearchChange}
            formatData={formatData}
            searchUrl={searchUrl}
            autoFocus={autoFocus}
            translation={translation}
            onOk={onConfirm}
            />
    }

    handleClose = () => {
        const { onVisibleChange, mode } = this.props
        if (onVisibleChange) {
            onVisibleChange(false)
        }

        this.setState({mode: mode, advancedModalVbl: false})
    }

    handleCancel = () => {
        const { onCancel, mode } = this.props
        if (onCancel) {
            onCancel(null)
        }

        this.setState({mode: mode, advancedModalVbl: false})
    }


    handleAdvancedConfirm = () => {
        const {onConfirm, mode} = this.props
        if (onConfirm) {
            let data = (this.advancedRef.current as any).getSelected()
            onConfirm(data)
        }

        this.setState({mode: mode, advancedModalVbl: false})
    }

    getContainer = () => {
        return this.modalRef.current
    }

    renderAdvancedSelect = () => {
        const { advanceParam, moreText, advancedVbl, multiple, translation } = this.props
        const { advancedModalVbl, selectValue } = this.state
        return <Modal
            ref= {this.modalRef}
            extraCls="lookupAdvance"
            title={advanceParam && advanceParam.dlgTitle || moreText}
            visible={advancedVbl || advancedModalVbl}
            size={advanceParam && advanceParam.modalSize || 'large'}
            height={advanceParam && advanceParam.modalHeight || '90%'}
            //style={{height: advanceParam && advanceParam.modalHeight || '90%'}
            escClosable={true}
            maskerClosable={false}
            onClose={this.handleClose}
            onCancel={this.handleCancel}
            onConfirm={this.handleAdvancedConfirm}
            translation={translation}
        >
            <AdvancedCmpt
                ref= {this.advancedRef}
                multiple={multiple}
                modalHeight={advanceParam && advanceParam.modalHeight}
                //getContainer={this.getContainer}
                {...advanceParam}
                selectValue={selectValue}
            />
        </Modal>
    }

    render() {
        const { customCls}  = this.props;
        const { mode } = this.state
        return (
            <div className={'phoenix-lookup ' + (customCls ? customCls : '')}>
                {mode === 'simple' && this.renderSimpleList() || this.renderAdvancedSelect()}
            </div>
        )
    }
}