import template from "./ImagePreviewGroup.html";

class ImagePreviewGroup {

    useModules = ["esNgAntd"];

    context = true;

    state = {
        current: 0,
        visible: false,
        src: null,
        childrens: [],
    };

    constructor($element, $attrs) {
        this.handlePreview();
    }

    addChildren(children) {
        this.state.childrens.push(children);
        return this.state.childrens.length - 1;
    }

    setCurrent(value) {
        this.state.current = value;
        if (
            typeof this.props.preview === "object" &&
            typeof this.props.preview.onCurrentChange === "function"
        ) {
            this.props.preview.onCurrentChange(value);
        }
    }

    setVisible(value) {
        this.state.visible = value;
        if (
            typeof this.props.preview === "object" &&
            typeof this.props.preview.onVisibleChange === "function"
        ) {
            this.props.preview.onVisibleChange(value);
        }
    }

    handleOpen(index) {
        this.setCurrent(index);
        this.state.src = this.state.childrens[index].state.src;
        this.setVisible(true)
    }

    handleClose() {
        this.setVisible(false)
    }

    handlePrev() {
        this.setCurrent(this.state.current > 0 ? this.state.current - 1 : 0);
        this.state.src = this.state.childrens[this.state.current].state.src;
    }

    handleNext() {
        this.setCurrent(
            this.state.current < this.state.childrens.length - 1
                ? this.state.current + 1
                : this.state.childrens.length - 1
        );
        this.state.src = this.state.childrens[this.state.current].state.src;
    }

    handlePreview() {
        let className;
        if ($attrs.class) {
            className = ` ${$attrs.class}`;
        }
        esNgAntd.createLayer(
            `
            <div class="ant-image-preview-root${className}">
                <div class="ant-image-preview-mask" ng-if="state.visible"></div>
                <div class="ant-image-preview-wrap" ng-show="state.visible">
                    <div class="ant-image-preview">
                        <div class="ant-image-preview-content">
                            <div class="ant-image-preview-body">
                                <ul class="ant-image-preview-operations">
                                    <li class="ant-image-preview-operations-operation">
                                        <span class="anticon anticon-close ant-image-preview-operations-icon" ng-click="handleClose()">
                                            <antd-icon type="CloseOutlined"></antd-icon>
                                        </span>
                                    </li> 
                                </ul>
                                <div class="ant-image-preview-img-wrapper">
                                    <img class="ant-image-preview-img" ng-src="{{state.src}}"/>
                                </div>
                                <div ng-class="{'ant-image-preview-switch-left': true, 'ant-image-preview-switch-left-disabled': state.current===0}" ng-click="handlePrev()">
                                    <antd-icon type="LeftOutlined"></antd-icon>
                                </div>
                                <div ng-class="{'ant-image-preview-switch-right': true,'ant-image-preview-switch-right-disabled': (state.childrens.length-1)===state.current}"  ng-click="handleNext()">
                                    <antd-icon type="RightOutlined"></antd-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `,
            $scope
        );
    }

    render() {
        return template;
    }
}

ImagePreviewGroup.propTypes = {
    preview: propTypes.object
}