import React from 'react';
import {CapButton} from '@capillarytech/cap-ui-library';
import {FormattedMessage} from 'react-intl';
import messages from './messages';
export const response = {
  metaEntities: [
    {
      _id: "5abdf7102f33f1692f4acfbc",
      type: "LAYOUT",
      definition: {
        channel: "EMAIL",
        standalone: {
          sections: [
            {
              type: "multicols",

              inputFields: [
                {
                  cols: [
                    {
                      id: "template-subject",
                      placeholder: "Enter Email Subject",
                      type: "cap-tag-list-with-input",
                      metaType: "text",
                      datatype: "string",
                      required: true,
                      label: "Subject",
                      styling: "semantic",
                      order: 1,
                      width: 16,
                      customComponent: true,
                      standalone: true,
                      onlyDisplay: false,
                      errorMessage: "Email Subject cannot be empty.",
                      supportedEvents: [
                        "onChange",
                        "onTagSelect",
                      ],
                    },
                  ],
                },
              ],
            },
            {
              type: "multicols",
              inputFields: [
                {
                  cols: [
                    {
                      id: "template-name",
                      placeholder: "Enter template name",
                      type: "input",
                      metaType: "text",
                      datatype: "string",
                      required: true,
                      style: {
                        fontSize: "20px",
                        fontFamily: "proxima-nova,sans-serif",
                        fontStyle: "normal",
                        fontWeight: 600,
                      },
                      styling: "semantic",
                      order: 1,
                      width: 9,
                      customComponent: false,
                      standalone: true,
                      onlyDisplay: false,
                      errorMessage: "Template name cannot be empty.",
                      supportedEvents: ["onChange"],
                    },
                    {
                      id: "template-version",
                      type: "select",
                      options: [],
                      metaType: "text",
                      datatype: "string",
                      required: true,
                      fluid: true,
                      styling: "semantic",
                      style: {
                        fontSize: "14px",
                        fontFamily: "open-sans",
                        fontStyle: "normal",
                        marginBottom: "16px",
                      },
                      order: 1,
                      width: 5,
                      customComponent: false,
                      standalone: true,
                      supportedEvents: ["onSelect", "addVersion"],
                    },
                    {
                      id: "preview-button",
                      width: 3,
                      offset: 8,
                      metaType: "submit-button",
                      colStyle: {
                        textAlign: "right",
                        paddingRight: "12px",
                      },
                      type: "button",
                      buttonType: "cancel",
                      value: "Preview",
                      customComponent: false,
                      standalone: true,
                      styling: "semantic",
                      order: 3,
                      fluid: false,
                      submitAction: "previewTemplate",
                      onlyDisplay: true,
                      supportedEvents: ["previewTemplate"],
                    },
                    {
                      id: "cancel-button",
                      width: 2,
                      metaType: "submit-button",
                      colStyle: {
                        textAlign: "right",
                        width: "9%",
                      },
                      type: "button",
                      buttonType: "cancel",
                      value: "Cancel",
                      customComponent: false,
                      standalone: true,
                      styling: "semantic",
                      order: 3,
                      fluid: false,
                      onlyDisplay: true,
                      submitAction: "cancelTemplate",
                      supportedEvents: ["cancelTemplate"],
                    },
                    {
                      id: "save-button",
                      width: 2,
                      metaType: "submit-button",
                      colStyle: {
                        textAlign: "right",
                        width: "7%",
                      },
                      type: "button",
                      buttonType: "primary",
                      value: "Save",
                      customComponent: false,
                      styling: "semantic",
                      order: 3,
                      fluid: false,
                      standalone: true,
                      onlyDisplay: true,
                      submitAction: "saveFormData",
                      supportedEvents: ["saveFormData"],
                    },
                  ],
                },
              ],
              actionFields: [],
            },
          ],
        },
        containers: [
          {
            panes: [
              {
                sections: [
                  {
                    type: "multicols",
                    width: 24,
                    actionFields: [],
                    inputFields: [
                      {
                        cols: [
                          {
                            id: "template-content",
                            type: "ckeditor",
                            metaType: "text",
                            datatype: "string",
                            required: true,
                            onlyDisplay: false,
                            standalone: false,
                            order: 2,
                            width: 24,
                            customComponent: true,
                            supportedEvents: [
                              "onContentChange",
                              "getEditorInstanse",
                            ],
                          },
                          // will remove once bee gets tested end to end
                          // {
                          //   id: "edmeditor",
                          //   type: "edmeditor",
                          //   metaType: "text",
                          //   datatype: "string",
                          //   required: true,
                          //   onlyDisplay: true,
                          //   standalone: false,
                          //   width: 24,
                          //   order: 2,
                          //   customComponent: true,
                          //   colStyle: { display: "none" },
                          //   supportedEvents: [],
                          // },
                          {
                            id: "BEEeditor",
                            type: "BEEeditor",
                            metaType: "text",
                            datatype: "string",
                            required: true,
                            onlyDisplay: true,
                            standalone: false,
                            width: 24,
                            order: 2,
                            customComponent: true,
                            colStyle: { display: "none" },
                            supportedEvents: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
            type: "tabs",
            defaultPanes: 1,
            additionalPanes: 0,
            id: "pane",
            tabBarExtraContent: {
              sections: [
                {
                  type: "multicols",
                  actionFields: [],
                  inputFields: [
                    {
                      rowStyle: {
                        display: "flex",
                        flex: 1,
                        alignItems: "center",
                      },
                      cols: [
                        {
                          id: "add-language-button",
                          metaType: "submit-button",
                          type: "customPopover",
                          customComponent: true,
                          onlyDisplay: true,
                          styling: "semantic",
                          order: 3,
                          width: 3,
                          offset: 2,
                          colStyle: {
                            color: "rgb(78, 146, 229)",
                            fontSize: "14px",
                            fontFamily: "open-sans, sans-serif !important",
                            fontStyle: "normal",
                            fontWeight: "600",
                            lineHeight: "24px",
                            textAlign: "center",
                            cursor: "pointer",
                            display: "",
                          },
                          popOverList: [],
                          baseLanguage: "en",
                          submitAction: "addLanguage",
                          supportedEvents: ["addLanguage"],
                        },
                        {
                          id: "insert-image",
                          metaType: "label",
                          type: "div",
                          primitive: true,
                          value: <CapButton isAddBtn type="flat"><FormattedMessage {...messages.image} /></CapButton>,
                          fluid: true,
                          onlyDisplay: false,
                          styling: "semantic",
                          order: 1,
                          customComponent: false,
                          submitAction: "onImageSelect",
                          style: {},
                          colStyle: {
                            display: "flex",
                            alignItems: "center",
                            fontSize: "14px",
                            fontFamily: "open-sans, sans-serif",
                            fontStyle: "normal",
                            fontWeight: "600",
                            justifyContent: "flex-end",
                          },
                          width: 3,
                          offset: 10,
                          supportedEvents: ["onImageSelect"],
                        },
                        {
                          id: "mark-final-version-label",
                          metaType: "label",
                          type: "div",
                          primitive: true,
                          value: "Mark as Final",
                          onlyDisplay: true,
                          customComponent: false,
                          order: 3,
                          width: 3,
                          fluid: false,
                          colStyle: {
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "flex-end",
                          },
                          style: {
                            color: "#4E92E5",
                            fontSize: "14px",
                            fontFamily: "open-sans",
                            lineHeight: "24px",
                            textAlign: "center",
                            cursor: "pointer",
                            display: "",
                          },
                          submitAction: "markFinalVersion",
                          supportedEvents: ["markFinalVersion"],
                        },
                        {
                          id: "tagList",
                          label: "Add label",
                          type: "tag-list",
                          metaType: "List",
                          datatype: "select",
                          required: true,
                          fluid: true,
                          onlyDisplay: true,
                          styling: "semantic",
                          order: 1,
                          style: {
                            textAlign: "right",
                            border: "none",
                            alignItems: "center",
                            display: "flex",
                            fontFamily: "open-sans, sans-serif",
                            fontStyle: "normal",
                            fontWeight: "600",
                            marginLeft: "0.313rem",
                          },
                          customComponent: true,
                          width: 2,
                          offset: 1,
                          supportedEvents: ["onTagSelect"],
                          colStyle: {
                            alignItems: "center",
                            display: "flex",
                            fontFamily: "open-sans, sans-serif",
                            fontStyle: "normal",
                            fontWeight: "600",
                            justifyContent: "flex-end",
                          },
                        },
                        {
                          id: "tab-options-popover",
                          metaType: "display",
                          colStyle: {
                            textAlign: "right",
                            flex: 0,
                            display: "none",
                            alignItems: "center",
                          },
                          type: "popover",
                          customComponent: false,
                          styling: "semantic",
                          order: 3,
                          width: 2,
                          offset: 4,
                          fluid: false,
                          onlyDisplay: true,
                          submitAction: "onTabOptionSelect",
                          supportedEvents: ["onTabOptionSelect"],
                          content: {
                            sections: [
                              {
                                type: "multicols",
                                inputFields: [
                                  {
                                    cols: [
                                      {
                                        id: "switch-editor-label",
                                        metaType: "label",
                                        type: "div",
                                        primitive: true,
                                        value: "Switch Editor",
                                        onlyDisplay: true,
                                        customComponent: false,
                                        order: 4,
                                        fluid: false,
                                        className: "version-popover",
                                        submitAction: "switchEditor",
                                        supportedEvents: ["switchEditor"],
                                        style: { display: 'none'},
                                      },
                                    ],
                                  },
                                ],
                                actionFields: [],
                              },
                            ],
                          },
                          value: {
                            sections: [
                              {
                                type: "multicols",
                                inputFields: [
                                  {
                                    cols: [
                                      {
                                        id: "tab-option-icon",
                                        metaType: "display",
                                        type: "icon",
                                        onlyDisplay: true,
                                        primitive: false,
                                        value: "more_vert",
                                        customComponent: false,
                                        order: 3,
                                        fluid: false,
                                        colStyle: {
                                          "flex": 1,
                                          "alignItems": "center",
                                          "justify-Self": "center",
                                          "display": "flex",
                                        },
                                      },
                                    ],
                                  },
                                ],
                                actionFields: [],
                              },
                            ],
                          },
                          trigger: "click",
                          placement: "bottomRight",
                        },
                      ],
                    },
                  ],
                },
              ],
            },
            tabContent: {
              sections: [
                {
                  type: "multicols",
                  inputFields: [
                    {
                      rowStyle: { display: "flex", flex: 1 },
                      cols: [
                        {
                          id: "tab-header",
                          metaType: "label",
                          value: "English",
                          primitive: true,
                          dynamicTab: false,
                          type: "div",
                          width: 5,
                          offset: 0,
                          onlyDisplay: true,
                          colStyle: { flex: 1 },
                          supportedEvents: ["onChange"],
                        },
                      ],
                    },
                  ],
                  actionFields: [],
                },
              ],
            },
            label: "Version",
            onlyDisplay: true,
            supportedEvents: ["onTabChange"],
            isActive: true,
          },
        ],
      },
      isActive: true,
      createdBy: 15000449,
      updatedBy: 15000449,
      createdAt: "2018-03-30T08:36:32.990Z",
      updatedAt: "2018-04-11T04:35:52.572Z",
    },
  ],
};
