import EditFormUtils from './utils';
import { getContextComponents } from '../../../../utils';
export default [
    {
        weight: 0,
        input: true,
        label: 'Advanced Logic',
        key: 'logic',
        templates: {
            header: '<div class="row"> \n  <div class="col-sm-6">\n    <strong>{{ value.length }} {{ ctx.t("Advanced Logic Configured") }}</strong>\n  </div>\n</div>',
            row: '<div class="row"> \n  <div class="col-sm-6">\n    <div>{{ row.name }} </div>\n  </div>\n  <div class="col-sm-2"> \n    <div class="btn-group pull-right"> \n      <button class="btn btn-default editRow">{{ ctx.t("Edit") }}</button> \n      <button class="btn btn-danger removeRow">{{ ctx.t("Delete") }}</button> \n    </div> \n  </div> \n</div>',
            footer: '',
        },
        type: 'editgrid',
        addAnother: 'Add Logic',
        saveRow: 'Save Logic',
        components: [
            {
                weight: 0,
                input: true,
                inputType: 'text',
                label: 'Logic Name',
                key: 'name',
                validate: {
                    required: true,
                },
                type: 'textfield',
            },
            {
                weight: 10,
                key: 'triggerPanel',
                input: false,
                title: 'Trigger',
                tableView: false,
                components: [
                    {
                        weight: 0,
                        input: true,
                        tableView: false,
                        components: [
                            {
                                weight: 0,
                                input: true,
                                label: 'Type',
                                key: 'type',
                                tableView: false,
                                data: {
                                    values: [
                                        {
                                            value: 'simple',
                                            label: 'Simple',
                                        },
                                        {
                                            value: 'javascript',
                                            label: 'Javascript',
                                        },
                                        {
                                            value: 'json',
                                            label: 'JSON Logic',
                                        },
                                        {
                                            value: 'event',
                                            label: 'Event',
                                        },
                                    ],
                                },
                                dataSrc: 'values',
                                template: '<span>{{ item.label }}</span>',
                                type: 'select',
                            },
                            {
                                weight: 10,
                                label: '',
                                key: 'simple',
                                type: 'container',
                                tableView: false,
                                customConditional({ row }) {
                                    return row.type === 'simple';
                                },
                                components: [
                                    {
                                        input: true,
                                        key: 'show',
                                        label: 'Show',
                                        type: 'hidden',
                                        tableView: false,
                                        calculateValue() {
                                            return true;
                                        },
                                    },
                                    {
                                        type: 'select',
                                        input: true,
                                        label: 'When the form component:',
                                        key: 'when',
                                        dataSrc: 'custom',
                                        valueProperty: 'value',
                                        tableView: false,
                                        data: {
                                            custom(context) {
                                                return getContextComponents(context);
                                            },
                                        },
                                    },
                                    {
                                        type: 'textfield',
                                        input: true,
                                        label: 'Has the value:',
                                        key: 'eq',
                                        tableView: false,
                                    },
                                ],
                            },
                            {
                                weight: 10,
                                type: 'textarea',
                                key: 'javascript',
                                rows: 5,
                                editor: 'ace',
                                as: 'javascript',
                                input: true,
                                tableView: false,
                                placeholder: `result = (data['mykey'] > 1);`,
                                description: '"row", "data", and "component" variables are available. Return "result".',
                                customConditional({ row }) {
                                    return row.type === 'javascript';
                                },
                            },
                            {
                                weight: 10,
                                type: 'textarea',
                                key: 'json',
                                rows: 5,
                                editor: 'ace',
                                label: 'JSON Logic',
                                as: 'json',
                                input: true,
                                tableView: false,
                                placeholder: `{ ... }`,
                                description: '"row", "data", "component" and "_" variables are available. Return the result to be passed to the action if truthy.',
                                customConditional({ row }) {
                                    return row.type === 'json';
                                },
                            },
                            {
                                weight: 10,
                                type: 'textfield',
                                key: 'event',
                                label: 'Event Name',
                                placeholder: 'event',
                                description: 'The event that will trigger this logic. You can trigger events externally or via a button.',
                                tableView: false,
                                customConditional({ row }) {
                                    return row.type === 'event';
                                },
                            },
                        ],
                        key: 'trigger',
                        type: 'container',
                    },
                ],
                type: 'panel',
            },
            {
                weight: 20,
                input: true,
                label: 'Actions',
                key: 'actions',
                tableView: false,
                templates: {
                    header: '<div class="row"> \n  <div class="col-sm-6"><strong>{{ value.length }} {{ ctx.t("actions") }}</strong></div>\n</div>',
                    row: '<div class="row"> \n  <div class="col-sm-6">\n    <div>{{ row.name }} </div>\n  </div>\n  <div class="col-sm-2"> \n    <div class="btn-group pull-right"> \n      <button class="btn btn-default editRow">{{ ctx.t("Edit") }}</button> \n      <button class="btn btn-danger removeRow">{{ ctx.t("Delete") }}</button> \n    </div> \n  </div> \n</div>',
                    footer: '',
                },
                type: 'editgrid',
                addAnother: 'Add Action',
                saveRow: 'Save Action',
                components: [
                    {
                        weight: 0,
                        title: 'Action',
                        input: false,
                        key: 'actionPanel',
                        type: 'panel',
                        components: [
                            {
                                weight: 0,
                                input: true,
                                inputType: 'text',
                                label: 'Action Name',
                                key: 'name',
                                validate: {
                                    required: true,
                                },
                                type: 'textfield',
                            },
                            {
                                weight: 10,
                                input: true,
                                label: 'Type',
                                key: 'type',
                                data: {
                                    values: [
                                        {
                                            value: 'property',
                                            label: 'Property',
                                        },
                                        {
                                            value: 'value',
                                            label: 'Value',
                                        },
                                        {
                                            label: 'Merge Component Schema',
                                            value: 'mergeComponentSchema',
                                        },
                                        {
                                            label: 'Custom Action',
                                            value: 'customAction',
                                        },
                                    ],
                                },
                                dataSrc: 'values',
                                template: '<span>{{ item.label }}</span>',
                                type: 'select',
                            },
                            {
                                weight: 20,
                                type: 'select',
                                template: '<span>{{ item.label }}</span>',
                                dataSrc: 'json',
                                tableView: false,
                                data: {
                                    json: [
                                        {
                                            label: 'Hidden',
                                            value: 'hidden',
                                            type: 'boolean',
                                        },
                                        {
                                            label: 'Required',
                                            value: 'validate.required',
                                            type: 'boolean',
                                        },
                                        {
                                            label: 'Disabled',
                                            value: 'disabled',
                                            type: 'boolean',
                                        },
                                        {
                                            label: 'Label',
                                            value: 'label',
                                            type: 'string',
                                        },
                                        {
                                            label: 'Title',
                                            value: 'title',
                                            type: 'string',
                                        },
                                        {
                                            label: 'Prefix',
                                            value: 'prefix',
                                            type: 'string',
                                        },
                                        {
                                            label: 'Suffix',
                                            value: 'suffix',
                                            type: 'string',
                                        },
                                        {
                                            label: 'Tooltip',
                                            value: 'tooltip',
                                            type: 'string',
                                        },
                                        {
                                            label: 'Description',
                                            value: 'description',
                                            type: 'string',
                                        },
                                        {
                                            label: 'Placeholder',
                                            value: 'placeholder',
                                            type: 'string',
                                        },
                                        {
                                            label: 'Input Mask',
                                            value: 'inputMask',
                                            type: 'string',
                                        },
                                        {
                                            label: 'CSS Class',
                                            value: 'className',
                                            type: 'string',
                                        },
                                        {
                                            label: 'Container Custom Class',
                                            value: 'customClass',
                                            type: 'string',
                                        },
                                    ],
                                },
                                key: 'property',
                                label: 'Component Property',
                                input: true,
                                customConditional({ row }) {
                                    return row.type === 'property';
                                },
                            },
                            {
                                weight: 30,
                                input: true,
                                label: 'Set State',
                                key: 'state',
                                tableView: false,
                                data: {
                                    values: [
                                        {
                                            label: 'True',
                                            value: 'true',
                                        },
                                        {
                                            label: 'False',
                                            value: 'false',
                                        },
                                    ],
                                },
                                dataSrc: 'values',
                                template: '<span>{{ item.label }}</span>',
                                type: 'select',
                                customConditional({ row }) {
                                    return (row.type === 'property' &&
                                        row.hasOwnProperty('property') &&
                                        row.property.type === 'boolean');
                                },
                            },
                            {
                                weight: 30,
                                type: 'textfield',
                                key: 'text',
                                label: 'Text',
                                inputType: 'text',
                                input: true,
                                tableView: false,
                                description: 'Can use templating with {{ data.myfield }}. "data", "row", "component" and "result" variables are available.',
                                customConditional({ row }) {
                                    return (row.type === 'property' &&
                                        row.hasOwnProperty('property') &&
                                        row.property.type === 'string' &&
                                        !row.property.component);
                                },
                            },
                            {
                                weight: 20,
                                input: true,
                                label: 'Value (Javascript)',
                                key: 'value',
                                editor: 'ace',
                                as: 'javascript',
                                rows: 5,
                                placeholder: `value = data.myfield;`,
                                type: 'textarea',
                                tableView: false,
                                description: '"row", "data", "component", and "result" variables are available. Return the value.',
                                customConditional({ row }) {
                                    return row.type === 'value';
                                },
                            },
                            {
                                weight: 20,
                                input: true,
                                label: 'Schema Definition',
                                key: 'schemaDefinition',
                                editor: 'ace',
                                as: 'javascript',
                                rows: 5,
                                placeholder: `schema = { label: 'Updated' };`,
                                type: 'textarea',
                                tableView: false,
                                description: '"row", "data", "component", and "result" variables are available. Return the schema.',
                                customConditional({ row }) {
                                    return row.type === 'mergeComponentSchema';
                                },
                            },
                            Object.assign(EditFormUtils.logicVariablesTable('<tr><th>input</th><td>The value that was input into this component</td></tr>'), {
                                customConditional({ row }) {
                                    return row.type === 'customAction';
                                },
                            }),
                            {
                                weight: 20,
                                input: true,
                                label: 'Custom Action (Javascript)',
                                key: 'customAction',
                                editor: 'ace',
                                rows: 5,
                                placeholder: `value = data.myfield;`,
                                type: 'textarea',
                                tableView: false,
                                customConditional({ row }) {
                                    return row.type === 'customAction';
                                },
                            },
                        ],
                    },
                ],
            },
        ],
    },
];
