p3xr.ng.component('p3xrMainKeyList', {
    template: require('./p3xr-main-key-list.html'),
    bindings: {
        p3xrValue: '=',
        p3xrKey: '<'
    },
    controller: function($mdColors, p3xrCommon, p3xrSocket, $rootScope, p3xrDialogJsonView, p3xrDialogKeyNewOrSet) {

        this.appendValue = async (options) => {

            try {
                const { index, value } = options
                await p3xrDialogKeyNewOrSet.show({
                    type: 'append',
                    $event: options.$event,
                    model: {
                        type: 'list',
                        key: this.p3xrKey
                    }
                })
                $rootScope.$broadcast('p3x-refresh-key');
            } catch(e) {
                p3xrCommon.generalHandleError(e)
            }
        }



        this.editValue = async (options) => {

            try {
                const { index, value } = options
                await p3xrDialogKeyNewOrSet.show({
                    type: 'edit',
                    $event: options.$event,
                    model: {
                        type: 'list',
                        value: value,
                        index: options.index,
                        key: this.p3xrKey
                    }
                })
                $rootScope.$broadcast('p3x-refresh-key');
            } catch(e) {
                p3xrCommon.generalHandleError(e)
            }
        }


        this.deleteListElement = async (options) => {
            try {
                await p3xrCommon.confirm({
                    event: options.$event,
                    message: p3xr.strings.confirm.deleteListItem,
                })
                const response = await p3xrSocket.request({
                    action: 'key-list-delete-index',
                    payload: {
                        key: this.p3xrKey,
                        index: options.index,
                    }
                })
                $rootScope.$broadcast('p3x-refresh-key');
            } catch(e) {
                p3xrCommon.generalHandleError(e)
            }
        }

        this.showJson = (options) => {
            const { value } = options;
            p3xrDialogJsonView.show({
                value: value
            })
        }

        this.setTableStyles = (options) => {
            const { $odd } = options
            if (!$odd) {
                return '';
            }
            let style = '';
            const bg = $mdColors.getThemeColor(`${p3xr.state.themeLayout}-background-500-0.1`)
            style += `background-color: ${bg};`
            return style;
         }
    }
})