import AdmVue from "@assets/js/adm-vue.js";

const vm = new AdmVue({
  data() {
    return {
      options: [
        {
          tab: "dinamic",
          title: "Dinâmico",
          itens: [
            {
              identifier: "first_column",
              group: "Informação",
              fields: [
                {
                  label: "Exibição da Primeira Coluna",
                  name: "dinamic_foot_first_colunm",
                  type: "select",
                  mask: "",
                  options: "Type_FooterDinamicFirstColumn",
                  readonly: true
                }
              ]
            },
            {
              identifier: "link_extras",
              group: "Links Adicionais",
              fields: [
                {
                  label: "Página Fabricantes",
                  name: "dinamic_foot_link_add_manufacturer",
                  type: "select",
                  mask: "",
                  options: "Type_Status"
                },
                {
                  label: "Página Devoluções",
                  name: "dinamic_foot_link_add_devolution",
                  type: "select",
                  mask: "",
                  options: "Type_Status"
                }
              ]
            },
            {
              identifier: "contact",
              group: "Contato",
              fields: [
                {
                  label: "Exibir endereço",
                  name: "dinamic_foot_contact_show_address",
                  type: "select",
                  mask: "",
                  options: "Type_FooterYesOrNo",
                  readonly: false
                },
                {
                  label: "Tipo de configuração",
                  name: "dinamic_foot_contact_type_config",
                  type: "select",
                  mask: "",
                  options: "Type_FooterDinamicContact",
                  readonly: true
                }
              ]
            },
            {
              identifier: "social_midia",
              group: "Redes Sociais",
              fields: [
                {
                  label: "Cor de Fundo",
                  name: "dinamic_foot_social_midia_bg",
                  type: "color",
                  mask: "hexadecimal"
                },
                {
                  label: "Cor da Fonte",
                  name: "dinamic_foot_social_midia_font",
                  type: "color",
                  mask: "hexadecimal"
                },
                {
                  label: "Link para o Facebook",
                  name: "dinamic_foot_social_midia_link_facebook",
                  description: "Coloque o link para sua página no facebook.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Twitter",
                  name: "dinamic_foot_social_midia_link_twitter",
                  description: "Coloque o link para sua página no twitter.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Google",
                  name: "dinamic_foot_social_midia_link_google",
                  description: "Coloque o link para sua página no google.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Rss",
                  name: "dinamic_foot_social_midia_link_rss",
                  description: "Coloque o link para sua página no rss.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Pinterest",
                  name: "dinamic_foot_social_midia_link_pinterest",
                  description: "Coloque o link para sua página no Pinterest.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Linkedin",
                  name: "dinamic_foot_social_midia_link_linkedin",
                  description: "Coloque o link para sua página no linkedin.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Youtube",
                  name: "dinamic_foot_social_midia_link_youtube",
                  description: "Coloque o link para sua página no youtube.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Instagram",
                  name: "dinamic_foot_social_midia_link_instagram",
                  description: "Coloque o link para sua página no instagram.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Blogger",
                  name: "dinamic_foot_social_midia_link_blogger",
                  description: "Coloque o link para sua página no bloggersss.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o TikTok",
                  name: "dinamic_foot_social_midia_link_tiktok",
                  description: "Coloque o link para sua página no TikTok.",
                  type: "text",
                  mask: ""
                }
              ]
            },
            {
              identifier: "icon_payment",
              group: "Ícones de Pagamento",
              fields: [
                {
                  label: "Status",
                  name: "dinamic_foot_icon_payment_status",
                  type: "select",
                  mask: "",
                  description: "Habilitar a exibição dos ícones de pagamento.",
                  options: "Type_StatusEn"
                },
                {
                  label: "Bandeiras de pagamento automáticas",
                  name: "dinamic_foot_icon_payment_auto_flag",
                  type: "select",
                  mask: "",
                  options: "Type_DsimDnao"
                },
                {
                  label: "Layout",
                  name: "dinamic_foot_icon_payment_layout",
                  type: "select",
                  mask: "",
                  options: "bannersLayout"
                },
                {
                  label: "Largura das imagens",
                  name: "dinamic_foot_icon_payment_width_image",
                  type: "text",
                  mask: "",
                  description:
                    "Largura em Pixel (px). Informar apenas valor numérico. Ex: 30"
                },
                {
                  label: "Altura das imagens",
                  name: "dinamic_foot_icon_payment_height_image",
                  type: "text",
                  mask: "",
                  description:
                    "Altura em Pixel (px). Informar apenas valor numérico. Ex: 30"
                }
              ]
            },
            {
              identifier: "certificates",
              group: "Certificados",
              fields: [
                {
                  label: "Selecionar Certificado",
                  name: "dinamic_foot_certificate_type",
                  type: "select",
                  mask: "",
                  options: "Type_Certificado"
                },
                {
                  label: "Layout",
                  name: "dinamic_foot_certificate_layout",
                  type: "select",
                  mask: "",
                  options: "bannersLayout"
                },
                {
                  label: "Largura das imagens",
                  name: "dinamic_foot_certificate_width_img",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Altura das imagens",
                  name: "dinamic_foot_certificate_height_img",
                  type: "text",
                  mask: ""
                }
              ]
            },
            {
              identifier: "custom_container",
              group: "Infomes da Empresa",
              fields: [
                {
                  label: "Informações do rodapé personalizado",
                  name: "dinamic_foot_type_container",
                  type: "select",
                  mask: "",
                  options: "Type_FooterDinamicContainer",
                  readonly: true
                }
              ]
            }
          ]
        },
        {
          tab: "custom",
          title: "Personalizado",
          itens: [
            {
              identifier: "first_column",
              group: "Informação",
              fields: [
                {
                  label: "Exibição da Primeira Coluna",
                  name: "custom_foot_first_column",
                  type: "select",
                  mask: "",
                  options: "Type_FooterCustomFirstColumn"
                },
                {
                  label: "Conteudo",
                  name: "custom_foot_first_column_code",
                  type: "ckeditor"
                }
              ]
            },
            {
              identifier: "link_extras",
              group: "Links Adicionais",
              fields: [
                {
                  label: "Página Fabricantes",
                  name: "custom_foot_link_add_manufacturer",
                  type: "select",
                  mask: "",
                  options: "Type_Status"
                },
                {
                  label: "Página Devoluções",
                  name: "custom_foot_link_add_devolution",
                  type: "select",
                  mask: "",
                  options: "Type_Status"
                }
              ]
            },
            {
              identifier: "contact",
              group: "Contato",
              fields: [
                {
                  label: "Exibir endereço",
                  name: "custom_foot_contact_show_address",
                  type: "select",
                  mask: "",
                  options: "Type_FooterYesOrNo"
                },
                {
                  label: "Tipo de configuração",
                  name: "custom_foot_contact_type_config",
                  type: "select",
                  mask: "",
                  options: "Type_FooterCustomContact"
                },
                {
                  label: "Informações para Contato",
                  name: "custom_foot_contact_type_config_code",
                  type: "ckeditor"
                },
                {
                  label: "Titulo no rodapé",
                  name: "custom_foot_contact_title",
                  type: "text",
                  mask: ""
                }
              ]
            },
            {
              identifier: "social_midia",
              group: "Redes Sociais",
              fields: [
                {
                  label: "Cor de Fundo",
                  name: "custom_foot_social_midia_bg",
                  type: "color",
                  mask: "hexadecimal"
                },
                {
                  label: "Cor da Fonte",
                  name: "custom_foot_social_midia_font",
                  type: "color",
                  mask: "hexadecimal"
                },
                {
                  label: "Link para o Facebook",
                  name: "custom_foot_social_midia_link_facebook",
                  description: "Coloque o link para sua página no facebook.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Twitter",
                  name: "custom_foot_social_midia_link_twitter",
                  description: "Coloque o link para sua página no twitter.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Google",
                  name: "custom_foot_social_midia_link_google",
                  description: "Coloque o link para sua página no google.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Rss",
                  name: "custom_foot_social_midia_link_rss",
                  description: "Coloque o link para sua página no rss.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Pinterest",
                  name: "custom_foot_social_midia_link_pinterest",
                  description: "Coloque o link para sua página no Pinterest.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Linkedin",
                  name: "custom_foot_social_midia_link_linkedin",
                  description: "Coloque o link para sua página no linkedin.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Youtube",
                  name: "custom_foot_social_midia_link_youtube",
                  description: "Coloque o link para sua página no youtube.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Instagram",
                  name: "custom_foot_social_midia_link_instagram",
                  description: "Coloque o link para sua página no instagram.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o Blogger",
                  name: "custom_foot_social_midia_link_blogger",
                  description: "Coloque o link para sua página no blogger.",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Link para o TikTok",
                  name: "custom_foot_social_midia_link_tiktok",
                  description: "Coloque o link para sua página no TikTok.",
                  type: "text",
                  mask: ""
                }
              ]
            },
            {
              identifier: "icon_payment",
              group: "Ícones de Pagamento",
              fields: [
                {
                  label: "Status",
                  name: "custom_foot_icon_payment_status",
                  type: "select",
                  mask: "",
                  description: "Habilitar a exibição dos ícones de pagamento.",
                  options: "Type_StatusEn"
                },
                {
                  label: "Bandeiras de pagamento automáticas",
                  name: "custom_foot_icon_payment_auto_flag",
                  type: "select",
                  mask: "",
                  options: "Type_DsimDnao"
                },
                {
                  label: "Layout",
                  name: "custom_foot_icon_payment_layout",
                  type: "select",
                  mask: "",
                  options: "bannersLayout"
                },
                {
                  label: "Largura das imagens",
                  name: "custom_foot_icon_payment_width_image",
                  type: "text",
                  mask: "",
                  description:
                    "Largura em Pixel (px). Informar apenas valor numérico. Ex: 30"
                },
                {
                  label: "Altura das imagens",
                  name: "custom_foot_icon_payment_height_image",
                  type: "text",
                  mask: "",
                  description:
                    "Altura em Pixel (px). Informar apenas valor numérico. Ex: 30"
                }
              ]
            },
            {
              identifier: "certificates",
              group: "Certificados",
              fields: [
                {
                  label: "Selecionar Certificado",
                  name: "custom_foot_certificate_type",
                  type: "select",
                  mask: "",
                  options: "Type_Certificado"
                },
                {
                  label: "Layout",
                  name: "custom_foot_certificate_layout",
                  type: "select",
                  mask: "",
                  options: "bannersLayout"
                },
                {
                  label: "Largura das imagens",
                  name: "custom_foot_certificate_width_img",
                  type: "text",
                  mask: ""
                },
                {
                  label: "Altura das imagens",
                  name: "custom_foot_certificate_height_img",
                  type: "text",
                  mask: ""
                }
              ]
            },
            {
              identifier: "custom_container",
              group: "Infomes da Empresa",
              fields: [
                {
                  label: "Informações do rodapé personalizado",
                  name: "custom_foot_type_container",
                  type: "select",
                  mask: "",
                  options: "Type_FooterCustomContainer"
                },
                {
                  label: "Conteudo",
                  name: "custom_foot_type_container_code",
                  type: "ckeditor"
                }
              ]
            }
          ]
        }
      ],
      configurations: {
        setted_color0: "",
        setted_color1: "",
        setted_color2: "",
        setted_color3: "",
        setted_color4: "",
        setted_color5: "",
        setted_color6: "",
        setted_color7: ""
      },
      selectedOption: {},
      selectedItem: {},
      showFields: {},
      firstColumnCustom: false,
      contactCustom: false,
      customContainer: false,
      showContact: true,
      socialMidiaIsCustom: true,
      showIconsPayment: false,
      showPaymentAutoFlag: false,
      showCertificateContent: false,
      showCustomCertificate: false,
      showLinkManufacture: false,
      showLinkDevolution: false,
      ableToChangeFooterModel: false
    };
  },
  components: {
    WireframeFooter: () =>
      import(
        /* webpackChunkName: "WireframeFooter" */ "@components/Wireframe/WireframeFooter.vue"
      ),
    BaseInput: () =>
      import(
        /* webpackChunkName: "BaseTabs" */ "@elements/BaseInput/index.vue"
      ),
    BaseSelect: () =>
      import(
        /* webpackChunkName: "BaseTabs" */ "@elements/BaseSelect/index.vue"
      )
  },
  watch: {
    "configurations.module": {
      handler(newState, prevState) {
        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_link_add_manufacturer === "1" &&
          this.selectedItem.identifier === "link_extras"
        ) {
          this.showLinkManufacture = true;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_link_add_manufacturer === "0" &&
          this.selectedItem.identifier === "link_extras"
        ) {
          this.showLinkManufacture = false;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_link_add_devolution === "1" &&
          this.selectedItem.identifier === "link_extras"
        ) {
          this.showLinkDevolution = true;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_link_add_devolution === "0" &&
          this.selectedItem.identifier === "link_extras"
        ) {
          this.showLinkDevolution = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_link_add_manufacturer === "1" &&
          this.selectedItem.identifier === "link_extras"
        ) {
          this.showLinkManufacture = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_link_add_manufacturer === "0" &&
          this.selectedItem.identifier === "link_extras"
        ) {
          this.showLinkManufacture = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_link_add_devolution === "1" &&
          this.selectedItem.identifier === "link_extras"
        ) {
          this.showLinkDevolution = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_link_add_devolution === "0" &&
          this.selectedItem.identifier === "link_extras"
        ) {
          this.showLinkDevolution = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_certificate_type === "0" &&
          this.selectedItem.identifier === "certificates"
        ) {
          this.showCertificateContent = false;
          this.showCustomCertificate = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_certificate_type === "1" &&
          this.selectedItem.identifier === "certificates"
        ) {
          this.showCertificateContent = true;
          this.showCustomCertificate = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_certificate_type === "2" &&
          this.selectedItem.identifier === "certificates"
        ) {
          this.showCustomCertificate = true;
          this.showCertificateContent = false;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_certificate_type === "0" &&
          this.selectedItem.identifier === "certificates"
        ) {
          this.showCertificateContent = false;
          this.showCustomCertificate = false;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_certificate_type === "1" &&
          this.selectedItem.identifier === "certificates"
        ) {
          this.showCertificateContent = true;
          this.showCustomCertificate = false;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_certificate_type === "2" &&
          this.selectedItem.identifier === "certificates"
        ) {
          this.showCustomCertificate = true;
          this.showCertificateContent = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_icon_payment_auto_flag === "1" &&
          this.selectedItem.identifier === "icon_payment"
        ) {
          this.showPaymentAutoFlag = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_icon_payment_auto_flag === "0" &&
          this.selectedItem.identifier === "icon_payment"
        ) {
          this.showPaymentAutoFlag = false;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_icon_payment_auto_flag === "1" &&
          this.selectedItem.identifier === "icon_payment"
        ) {
          this.showPaymentAutoFlag = true;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_icon_payment_auto_flag === "0" &&
          this.selectedItem.identifier === "icon_payment"
        ) {
          this.showPaymentAutoFlag = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_icon_payment_status === "enable" &&
          this.selectedItem.identifier === "icon_payment"
        ) {
          this.showIconsPayment = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.custom_foot_icon_payment_status === "disable" &&
          this.selectedItem.identifier === "icon_payment"
        ) {
          this.showIconsPayment = false;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_icon_payment_status === "enable" &&
          this.selectedItem.identifier === "icon_payment"
        ) {
          this.showIconsPayment = true;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          newState.dinamic_foot_icon_payment_status === "disable" &&
          this.selectedItem.identifier === "icon_payment"
        ) {
          this.showIconsPayment = false;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          this.selectedItem.identifier === "contact" &&
          newState.dinamic_foot_contact_show_address === "yes"
        ) {
          this.showContact = true;
        }

        if (
          this.selectedOption.tab === "dinamic" &&
          this.selectedItem.identifier === "contact" &&
          newState.dinamic_foot_contact_show_address === "no"
        ) {
          this.showContact = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.selectedItem.identifier === "contact" &&
          newState.custom_foot_contact_show_address === "yes"
        ) {
          this.showContact = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.selectedItem.identifier === "contact" &&
          newState.custom_foot_contact_show_address === "no"
        ) {
          this.showContact = false;
        }

        if (
          newState.custom_foot_certificate_type === "0" ||
          newState.custom_foot_certificate_type === "1"
        ) {
          this.showFields["custom_foot_certificate_layout"] = false;
          this.showFields["custom_foot_certificate_width_img"] = false;
          this.showFields["custom_foot_certificate_height_img"] = false;
        }

        if (newState.custom_foot_certificate_type === "2") {
          this.showFields["custom_foot_certificate_layout"] = true;
          this.showFields["custom_foot_certificate_width_img"] = true;
          this.showFields["custom_foot_certificate_height_img"] = true;
        }

        if (
          newState.dinamic_foot_certificate_type === "0" ||
          newState.dinamic_foot_certificate_type === "1"
        ) {
          this.showFields["dinamic_foot_certificate_layout"] = false;
          this.showFields["dinamic_foot_certificate_width_img"] = false;
          this.showFields["dinamic_foot_certificate_height_img"] = false;
        }

        if (newState.dinamic_foot_certificate_type === "2") {
          this.showFields["dinamic_foot_certificate_layout"] = true;
          this.showFields["dinamic_foot_certificate_width_img"] = true;
          this.showFields["dinamic_foot_certificate_height_img"] = true;
        }

        if (newState.custom_foot_icon_payment_auto_flag === "1") {
          this.showFields["custom_foot_icon_payment_layout"] = false;
          this.showFields["custom_foot_icon_payment_width_image"] = false;
          this.showFields["custom_foot_icon_payment_height_image"] = false;
        }

        if (newState.custom_foot_icon_payment_auto_flag === "0") {
          this.showFields["custom_foot_icon_payment_layout"] = true;
          this.showFields["custom_foot_icon_payment_width_image"] = true;
          this.showFields["custom_foot_icon_payment_height_image"] = true;
        }

        if (newState.dinamic_foot_icon_payment_auto_flag === "1") {
          this.showFields["dinamic_foot_icon_payment_layout"] = false;
          this.showFields["dinamic_foot_icon_payment_width_image"] = false;
          this.showFields["dinamic_foot_icon_payment_height_image"] = false;
        }

        if (newState.dinamic_foot_icon_payment_auto_flag === "0") {
          this.showFields["dinamic_foot_icon_payment_layout"] = true;
          this.showFields["dinamic_foot_icon_payment_width_image"] = true;
          this.showFields["dinamic_foot_icon_payment_height_image"] = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.selectedItem.identifier === "custom_container" &&
          newState.custom_foot_type_container === "1"
        ) {
          return this.showCkeditor(
            "custom_foot_type_container",
            "custom_container",
            "customContainer"
          );
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.selectedItem.identifier === "custom_container" &&
          newState.custom_foot_type_container === "0"
        ) {
          return this.hiddenCkeditor(
            "custom_foot_type_container",
            "customContainer"
          );
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.selectedItem.identifier === "contact" &&
          newState.custom_foot_contact_type_config === "advance"
        ) {
          this.showFields["custom_foot_contact_title"] = false;

          return this.showCkeditor(
            "custom_foot_contact_type_config",
            "contact",
            "contactCustom"
          );
        }
        if (
          this.selectedOption.tab === "custom" &&
          this.selectedItem.identifier === "contact" &&
          newState.custom_foot_contact_type_config === "easy"
        ) {
          this.showFields["custom_foot_contact_title"] = true;

          return this.hiddenCkeditor(
            "custom_foot_contact_type_config",
            "contactCustom"
          );
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.selectedItem.identifier === "first_column" &&
          newState.custom_foot_first_column === "static"
        ) {
          return this.showCkeditor(
            "custom_foot_first_column",
            "first_column",
            "firstColumnCustom"
          );
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.selectedItem.identifier === "first_column" &&
          newState.custom_foot_first_column === "dynamic"
        ) {
          return this.hiddenCkeditor(
            "custom_foot_first_column",
            "firstColumnCustom"
          );
        }
      },
      deep: true
    },
    selectedOption: {
      handler(newState, prevState) {
        if (newState.tab === "dinamic") {
          this.socialMidiaIsCustom = false;
          this.firstColumnCustom = false;
          this.configurations.module.footer_model_able = "0";

          this.$nextTick(() => {
            this.setDinamicPreview();
          });
        }

        if (newState.tab === "custom") {
          this.socialMidiaIsCustom = true;
          this.configurations.module.footer_model_able = "1";

          this.$nextTick(() => {
            this.setCustomPreview();
          });
        }
      },
      deep: true
    },
    selectedItem: {
      handler(newState, prevState) {
        if (Object.keys(newState).length === 0) {
          this.ableToChangeFooterModel = false;
        } else {
          this.ableToChangeFooterModel = true;
        }

        if (
          Object.keys(newState).length === 0 &&
          Object.keys(CKEDITOR.instances).length !== 0
        ) {
          const ckeditorInstances = [
            "custom_foot_first_column_code_editor",
            "custom_foot_contact_type_config_code_editor",
            "custom_foot_type_container_code_editor"
          ];

          ckeditorInstances.map(item => {
            this.removeCkeditor(item);
          });
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.identifier === "contact" &&
          this.configurations.module.custom_foot_contact_show_address === "yes"
        ) {
          this.showContact = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.identifier === "contact" &&
          this.configurations.module.custom_foot_contact_show_address === "no"
        ) {
          this.showContact = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.configurations.module.custom_foot_icon_payment_status ===
            "enable" &&
          newState.identifier === "icon_payment"
        ) {
          this.showIconsPayment = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.configurations.module.custom_foot_icon_payment_status ===
            "disable" &&
          newState.identifier === "icon_payment"
        ) {
          this.showIconsPayment = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.configurations.module.custom_foot_icon_payment_auto_flag ===
            "1" &&
          newState.identifier === "icon_payment"
        ) {
          this.showPaymentAutoFlag = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.configurations.module.custom_foot_icon_payment_auto_flag ===
            "0" &&
          newState.identifier === "icon_payment"
        ) {
          this.showPaymentAutoFlag = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.configurations.module.custom_foot_link_add_manufacturer ===
            "1" &&
          newState.identifier === "link_extras"
        ) {
          this.showLinkManufacture = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.configurations.module.custom_foot_link_add_manufacturer ===
            "0" &&
          newState.identifier === "link_extras"
        ) {
          this.showLinkManufacture = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.configurations.module.custom_foot_link_add_devolution === "1" &&
          newState.identifier === "link_extras"
        ) {
          this.showLinkDevolution = true;
        }

        if (
          this.selectedOption.tab === "custom" &&
          this.configurations.module.custom_foot_link_add_devolution === "0" &&
          newState.identifier === "link_extras"
        ) {
          this.showLinkDevolution = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.identifier === "first_column" &&
          this.configurations.module.custom_foot_first_column === "static"
        ) {
          this.$nextTick(() => {
            return this.showCkeditor(
              "custom_foot_first_column",
              "first_column",
              "firstColumnCustom"
            );
          });
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.identifier === "first_column" &&
          this.configurations.module.custom_foot_first_column === "dynamic"
        ) {
          this.$nextTick(() => {
            return this.hiddenCkeditor(
              "custom_foot_first_column",
              "firstColumnCustom"
            );
          });
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.identifier === "custom_container" &&
          this.configurations.module.custom_foot_type_container === "0"
        ) {
          this.showFields["custom_foot_type_container_code"] = false;
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.identifier === "custom_container" &&
          this.configurations.module.custom_foot_type_container === "1"
        ) {
          this.$nextTick(() => {
            return this.showCkeditor(
              "custom_foot_type_container",
              "custom_container",
              "customContainer"
            );
          });
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.identifier === "contact" &&
          this.configurations.module.custom_foot_contact_type_config ===
            "advance"
        ) {
          this.showFields["custom_foot_contact_title"] = false;

          this.$nextTick(() => {
            return this.showCkeditor(
              "custom_foot_contact_type_config",
              "contact",
              "contactCustom"
            );
          });
        }

        if (
          this.selectedOption.tab === "custom" &&
          newState.identifier === "contact" &&
          this.configurations.module.custom_foot_contact_type_config === "easy"
        ) {
          this.showFields["custom_foot_contact_title"] = true;

          return this.hiddenCkeditor(
            "custom_foot_contact_type_config",
            "contactCustom"
          );
        }
      },
      deep: true
    }
  },
  methods: {
    setPreviewColors(fieldName) {
      if (fieldName === "custom_foot_social_midia_bg") {
        this.configurations.custom_foot_social_midia_bg = this.configurations.module.custom_foot_social_midia_bg;
      }

      if (fieldName === "dinamic_foot_social_midia_bg") {
        this.configurations.dinamic_foot_social_midia_bg = this.configurations.module.dinamic_foot_social_midia_bg;
      }
    },
    showCkeditor(elementId, config, variable) {
      const element = elementId + "_code";

      this.showFields[element] = true;

      const textareaId = elementId + "_code_editor";

      this[variable] = true;
      this.setupCkeditor(textareaId, config);
    },
    hiddenCkeditor(elementId, variable) {
      const element = elementId + "_code";

      this.showFields[element] = false;

      this[variable] = false;
    },
    setupCkeditor(elementId, identifier) {
      if (
        Object.keys(CKEDITOR.instances).length === 0 &&
        !CKEDITOR.instances[elementId]
      ) {
        CKEDITOR.replace(elementId, {
          skin: "moono"
        });

        if (identifier === "first_column") {
          const htmlObject = document.createElement("div");
          htmlObject.innerHTML = this.configurations.module.custom_foot_first_column_code;

          CKEDITOR.instances[elementId].setData(htmlObject.innerHTML);
        }

        if (identifier === "contact") {
          const htmlObject = document.createElement("div");
          htmlObject.innerHTML = this.configurations.module.custom_foot_contact_type_config_code;

          CKEDITOR.instances[elementId].setData(htmlObject.innerHTML);
        }

        if (identifier === "custom_container") {
          const htmlObject = document.createElement("div");
          htmlObject.innerHTML = this.configurations.module.custom_foot_type_container_code;

          CKEDITOR.instances[elementId].setData(htmlObject.innerHTML);
        }

        this.setEventToCkeditor(elementId, identifier);
      }
    },
    removeCkeditor(elementId) {
      if (
        Object.keys(CKEDITOR.instances).length !== 0 &&
        CKEDITOR.instances[elementId]
      ) {
        CKEDITOR.instances[elementId].destroy();
      }
    },
    getTypeEnumList(name, tipo, customOptions) {
      if (customOptions === "true") {
        return this.getTypeEnumListCustomOptions(name, tipo);
      }

      switch (tipo) {
        case "Type_FooterDinamicFirstColumn":
          return this[tipo].getEnumList();
        case "Type_FooterCustomFirstColumn":
          return this[tipo].getEnumList(name);
        case "Type_DsimDnao":
          return this[tipo].getEnumList(name);
        case "Type_FooterDinamicContact":
          return this[tipo].getEnumList(name);
        case "Type_FooterCustomContact":
          return this[tipo].getEnumList(name);
        case "Type_FooterCustomContainer":
          return this[tipo].getEnumList(name);
        case "Type_FooterDinamicContainer":
          return this[tipo].getEnumList(name);
        case "Type_StatusEn":
          return this[tipo].getEnumList(name);
        case "Type_Certificado":
          return this[tipo].getEnumList(name);
        case "Type_Status":
          return this[tipo].getEnumList(name);
        case "Type_FooterYesOrNo":
          return this[tipo].getEnumList(name);
        case "bannersLayout":
          return this.prepareEnumList();
      }
    },
    setEventToCkeditor(elementId, identifier) {
      CKEDITOR.instances[elementId].on("change", () => {
        if (identifier === "first_column") {
          this.configurations.module.custom_foot_first_column_code = CKEDITOR.instances[
            elementId
          ].getData();
        }
        if (identifier === "contact") {
          this.configurations.module.custom_foot_contact_type_config_code = CKEDITOR.instances[
            elementId
          ].getData();
        }
        if (identifier === "custom_container") {
          this.configurations.module.custom_foot_type_container_code = CKEDITOR.instances[
            elementId
          ].getData();
        }
      });
    },
    prepareEnumList() {
      return this.bannersLayout;
    },
    changeFooterModel(model) {
      if (model === "0") {
        this.selectedOption = this.options[0];
        this.socialMidiaIsCustom = false;
        this.firstColumnCustom = false;
        this.configurations.module.footer_model_able = "0";
        this.setDinamicPreview();
      }

      if (model === "1") {
        this.selectedOption = this.options[1];
        this.socialMidiaIsCustom = true;
        this.configurations.module.footer_model_able = "1";
        this.setCustomPreview();
      }
    },
    setDinamicPreview() {
      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_contact_show_address === "no" &&
        this.configurations.module.dinamic_foot_contact_type_config === "easy"
      ) {
        this.contactCustom = false;
        this.showContact = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_contact_show_address ===
          "yes" &&
        this.configurations.module.dinamic_foot_contact_type_config === "easy"
      ) {
        this.contactCustom = false;
        this.showContact = true;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_certificate_type === "0"
      ) {
        this.showCertificateContent = false;
        this.showCustomCertificate = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_certificate_type === "1"
      ) {
        this.showCertificateContent = true;
        this.showCustomCertificate = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_certificate_type === "2"
      ) {
        this.showCustomCertificate = true;
        this.showCertificateContent = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_contact_type_config === "0"
      ) {
        this.contactCustom = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_type_container === "0"
      ) {
        this.customContainer = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_icon_payment_status === "enable"
      ) {
        this.showIconsPayment = true;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_icon_payment_status ===
          "disable"
      ) {
        this.showIconsPayment = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_icon_payment_auto_flag === "1"
      ) {
        this.showPaymentAutoFlag = true;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_icon_payment_auto_flag === "0"
      ) {
        this.showPaymentAutoFlag = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_link_add_devolution === "1"
      ) {
        this.showLinkDevolution = true;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_link_add_devolution === "0"
      ) {
        this.showLinkDevolution = false;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_link_add_manufacturer === "1"
      ) {
        this.showLinkManufacture = true;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.dinamic_foot_link_add_manufacturer === "0"
      ) {
        this.showLinkManufacture = false;
      }
    },
    setCustomPreview() {
      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_contact_show_address === "yes" &&
        this.configurations.module.custom_foot_contact_type_config === "advance"
      ) {
        this.contactCustom = true;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_contact_show_address === "no" &&
        this.configurations.module.custom_foot_contact_type_config === "advance"
      ) {
        this.contactCustom = true;
        this.showContact = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_contact_show_address === "no" &&
        this.configurations.module.custom_foot_contact_type_config === "easy"
      ) {
        this.contactCustom = false;
        this.showContact = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_contact_show_address === "yes" &&
        this.configurations.module.custom_foot_contact_type_config === "easy"
      ) {
        this.contactCustom = false;
        this.showContact = true;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_link_add_devolution === "1"
      ) {
        this.showLinkDevolution = true;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_link_add_devolution === "0"
      ) {
        this.showLinkDevolution = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_link_add_manufacturer === "1"
      ) {
        this.showLinkManufacture = true;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_link_add_manufacturer === "0"
      ) {
        this.showLinkManufacture = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_icon_payment_status === "enable"
      ) {
        this.showIconsPayment = true;
      }

      if (
        this.configurations.module.footer_model_able === "0" &&
        this.configurations.module.custom_foot_icon_payment_status === "disable"
      ) {
        this.showIconsPayment = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_icon_payment_auto_flag === "1"
      ) {
        this.showPaymentAutoFlag = true;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_icon_payment_auto_flag === "0"
      ) {
        this.showPaymentAutoFlag = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_certificate_type === "0"
      ) {
        this.showCertificateContent = false;
        this.showCustomCertificate = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_certificate_type === "1"
      ) {
        this.showCertificateContent = true;
        this.showCustomCertificate = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_certificate_type === "2"
      ) {
        this.showCustomCertificate = true;
        this.showCertificateContent = false;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_type_container === "1"
      ) {
        this.customContainer = true;
      }

      if (
        this.configurations.module.footer_model_able === "1" &&
        this.configurations.module.custom_foot_first_column === "static"
      ) {
        this.firstColumnCustom = true;
      }
    }
  },
  mounted() {
    if (this.configurations.module.footer_model_able === "0") {
      this.selectedOption = this.options[0];
      this.socialMidiaIsCustom = false;
      this.setDinamicPreview();
    }

    if (this.configurations.module.footer_model_able === "1") {
      this.selectedOption = this.options[1];
      this.socialMidiaIsCustom = true;
      this.setCustomPreview();
    }

    this.options.map(option => {
      option.itens.map(item => {
        item.fields.map(field => {
          this.showFields[field.name] = true;
        });
      });
    });
  }
});

AdmVue.init(vm);
