import React from 'react';
import { Cascader } from 'antd';
import GRANULARITY from './granularity.json';

const XAxisItem = ({ value: _propsValue, allowClear, disabled, options, onChange, placeholder }) => {
    return <Cascader
        value={_propsValue ? [_propsValue.column.value, _propsValue.granularity.value] : []}
        disabled={disabled}
        allowClear={allowClear === undefined || allowClear}
        placeholder={null}
        showSearch={{
            filter: (inputValue, path) => {
                let p0 = path[0].label.toLowerCase();
                let v = inputValue.toLowerCase();
                return p0.indexOf(v) !== -1;
            },
            sort: (a, b, inputValue) => {
                return a[0].label.localeCompare(b[0].label,"zh");
            },
            render: (inputValue, path) => {
                const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
                let v = inputValue.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
                let label0 = (path[0].label.split(new RegExp(`(${v})`, 'i')).map((fragment, i) => {
                    return (
                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === v.toLowerCase() ?
                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                        fragment
                    )
                }))
                return <div>{label0}{path[1] ? '>' + path[1].label : ''}</div>
            }
        }}
        options={options.map((c, i)=>{
            return {
                type: c.type,
                value: c.name,
                label: c.label,
                children: GRANULARITY[c.type].filter(g => !!c.granularityList ? (c.granularityList.indexOf(g.value) === -1) : true)
            }
        }).filter(o => o.type !== 'time' || o.children.length > 0)}
        onChange={(value, items) => {
            let column = {};
            let granularity = {};
            if(items.length > 0) {
                column = { type: items[0].type, value: items[0].value, label: items[0].label };
            }
            if(items.length > 1) {
                granularity = { value: items[1].value, label: items[1].label };
            }
            onChange({ column, granularity });
        }}
        displayRender={(label, selectedOptions) => {
            let text = '';
            let className = 'cascader-label';
            if(label.length > 0) {
                className += ' full-label';
                text += label[0];
                if(label.length > 1) {
                    text += '(' + label[1] + ')';
                }
            }else {
                className += ' empty-label';
                text = placeholder || '请选择...';
            }
            return <div className={className}>{text}</div>;
        }}
    >
    </Cascader> 
}; 

export default XAxisItem;