import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { VxeUI, getConfig, getIcon, getI18n, createEvent, globalMixins } from '../../ui';
export default {
    name: 'VxeText',
    mixins: [
        globalMixins.sizeMixin,
        globalMixins.permissionMixin
    ],
    props: {
        status: String,
        title: [String, Number],
        icon: String,
        prefixIcon: String,
        suffixIcon: String,
        loading: Boolean,
        content: [String, Number],
        clickToCopy: {
            type: Boolean,
            default: () => getConfig().text.clickToCopy
        },
        copyConfig: Object,
        size: {
            type: String,
            default: () => getConfig().text.size || getConfig().size
        }
    },
    data() {
        const reactData = {};
        return {
            xID: XEUtils.uniqueId(),
            reactData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeCopyOpts() {
            const $xeText = this;
            const props = $xeText;
            return Object.assign({}, getConfig().text.copyConfig, props.copyConfig);
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeText = this;
            $xeText.$emit(type, createEvent(evnt, { $text: $xeText }, params));
        },
        handleCopy(evnt) {
            const $xeText = this;
            const props = $xeText;
            const { content } = props;
            const copyOpts = $xeText.computeCopyOpts;
            const { showMessage } = copyOpts;
            const contentEl = $xeText.$refs.refContentElem;
            const copyVal = (contentEl ? contentEl.textContent : '') || content;
            if (copyVal) {
                if (VxeUI.clipboard.copy(copyVal)) {
                    if (showMessage && VxeUI.modal) {
                        VxeUI.modal.message({
                            content: getI18n('vxe.text.copySuccess'),
                            status: 'success'
                        });
                    }
                    $xeText.dispatchEvent('copy-success', {}, evnt);
                }
                else {
                    if (showMessage && VxeUI.modal) {
                        VxeUI.modal.message({
                            content: getI18n('vxe.text.copyError'),
                            status: 'error'
                        });
                    }
                    $xeText.dispatchEvent('copy-error', {}, evnt);
                }
            }
        },
        clickIconEvent(evnt) {
            const $xeText = this;
            const props = $xeText;
            const { clickToCopy } = props;
            const copyOpts = $xeText.computeCopyOpts;
            if (clickToCopy && copyOpts.trigger !== 'dblclick') {
                $xeText.handleCopy(evnt);
            }
        },
        dblclickIconEvent(evnt) {
            const $xeText = this;
            const props = $xeText;
            const { clickToCopy } = props;
            const copyOpts = $xeText.computeCopyOpts;
            if (clickToCopy && copyOpts.trigger === 'dblclick') {
                $xeText.handleCopy(evnt);
            }
        },
        clickEvent(evnt) {
            const $xeText = this;
            const props = $xeText;
            const { loading } = props;
            if (!loading) {
                $xeText.dispatchEvent('click', {}, evnt);
            }
        },
        dblclickEvent(evnt) {
            const $xeText = this;
            const props = $xeText;
            const { loading } = props;
            if (!loading) {
                $xeText.dispatchEvent('dblclick', {}, evnt);
            }
        },
        prefixEvent(evnt) {
            const $xeText = this;
            const props = $xeText;
            const { loading } = props;
            if (!loading) {
                $xeText.dispatchEvent('prefix-click', {}, evnt);
            }
        },
        suffixEvent(evnt) {
            const $xeText = this;
            const props = $xeText;
            const { loading } = props;
            if (!loading) {
                $xeText.dispatchEvent('suffix-click', {}, evnt);
            }
        },
        //
        // Render
        //
        renderCopyIcon(h) {
            const $xeText = this;
            const copyOpts = $xeText.computeCopyOpts;
            const { icon, status } = copyOpts;
            return h('span', {
                key: 'ci',
                class: ['vxe-text--copy-icon', {
                        [`theme--${status}`]: status
                    }],
                on: {
                    click: $xeText.clickIconEvent,
                    dblclick: $xeText.dblclickIconEvent
                }
            }, [
                h('i', {
                    class: icon || getIcon().TEXT_COPY
                })
            ]);
        },
        renderContent(h) {
            const $xeText = this;
            const props = $xeText;
            const slots = $xeText.$scopedSlots;
            const { loading, icon, prefixIcon, suffixIcon, clickToCopy, content } = props;
            const copyOpts = $xeText.computeCopyOpts;
            const defaultSlot = slots.default;
            const prefixIconSlot = slots.prefixIcon || slots['prefix-icon'] || slots.icon;
            const suffixIconSlot = slots.suffixIcon || slots['suffix-icon'];
            const copyToRight = copyOpts.layout === 'right';
            const contVNs = [];
            if (loading) {
                contVNs.push(h('span', {
                    key: 'lg',
                    class: 'vxe-text--loading'
                }, [
                    h('i', {
                        class: getIcon().TEXT_LOADING
                    })
                ]));
            }
            else if (clickToCopy && !copyToRight) {
                contVNs.push($xeText.renderCopyIcon(h));
            }
            if (prefixIcon || icon) {
                contVNs.push(h('span', {
                    key: 'si',
                    class: 'vxe-text--prefix-icon',
                    on: {
                        click: $xeText.prefixEvent
                    }
                }, prefixIconSlot
                    ? prefixIconSlot({})
                    : [
                        h('i', {
                            class: prefixIcon || icon
                        })
                    ]));
            }
            contVNs.push(h('span', {
                key: 'ct',
                ref: 'refContentElem',
                class: 'vxe-text--content',
                on: {
                    click: $xeText.clickEvent,
                    dblclick: $xeText.dblclickEvent
                }
            }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content)));
            if (suffixIcon) {
                contVNs.push(h('span', {
                    key: 'si',
                    class: 'vxe-text--suffix-icon',
                    on: {
                        click: $xeText.suffixEvent
                    }
                }, suffixIconSlot
                    ? suffixIconSlot({})
                    : [
                        h('i', {
                            class: suffixIcon
                        })
                    ]));
            }
            if (clickToCopy && copyToRight && !loading) {
                contVNs.push($xeText.renderCopyIcon(h));
            }
            return contVNs;
        },
        renderVN(h) {
            const $xeText = this;
            const props = $xeText;
            const { loading, status, title, clickToCopy } = props;
            const vSize = $xeText.computeSize;
            return h('span', {
                ref: 'refElem',
                class: ['vxe-text', {
                        [`size--${vSize}`]: vSize,
                        [`theme--${status}`]: status,
                        'is--copy': clickToCopy,
                        'is--loading': loading
                    }],
                attrs: {
                    title
                }
            }, $xeText.renderContent(h));
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};
