export default {
  components: {
    Aside: () => import(/* webpackChunkName: "Aside" */ './components/Aside.vue'),
    Banner: () => import(/* webpackChunkName: "Banner" */ './components/Banner.vue'),
    Footer: () => import(/* webpackChunkName: "Footer" */ './components/Footer.vue'),
    Header: () => import(/* webpackChunkName: "Header" */ './components/Header.vue'),
    Product: () => import(/* webpackChunkName: "Product" */ './components/Product.vue'),
  },
  props: {
    colors: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      styleElement: '',
    };
  },
  mounted() {
    const styleElement = document.createElement('style');
    this.styleElement = styleElement;
    document.head.appendChild(styleElement);
    this.handleColors();
  },
  watch: {
    colors: {
      handler() {
        this.handleColors();
      },
      deep: true,
    },
  },
  methods: {
    handleColors() {
      this.styleElement.textContent = `
        .wireframe {
          --body-background-color: ${this.colors.wg24_l_bodyb};
          --title-color: ${this.colors.wg24_l_header_color};
          --text-color: ${this.colors.wg24_l_body_fc};
          --link-color: ${this.colors.wg24_l_linkc};
          --link-hover-color: ${this.colors.wg24_l_hcolor};
          --button-primary-color: ${this.colors.wg24_btn_1bg_col};
          --button-primary-color-text: ${this.colors.wg24_btn_text_col};

          --option-background-color: ${this.colors.wg24_header_bgcolor};
          --option-border-top-color: ${this.colors.wg24_l_body_tbc};
          --option-border-bottom-color: ${this.colors.wg24_heade_m_lin_bg_c};
          --option-text-color: ${this.colors.wg24_header_menulcolor};
          --option-text-hover-color: ${this.colors.wg24_header_menulhcolor};

          --header-background-color: ${this.colors.wg24_header_bg_color};
          --header-border-bottom-color: ${this.colors.wg24_color_border_background};
          --header-text-color: ${this.colors.wg24_link_color_stick};
          --header-text-hover-color: ${this.colors.wg24_m_color_background};
          --header-search-background-color: ${this.colors.wg24_header_btsearch};
          --header-search-text-color: ${this.colors.wg24_icon_btnsearch_color};

          --nav-background-color: ${this.colors.wg24_mm_bgcol};
          --nav-center-background-color: ${this.colors.wg24_mm_bgcol_center};
          --nav-side-border-color: ${this.colors.wg24_mainm_brcol};
          --nav-text-color: ${this.colors.wg24_menum_lcolor};
          --nav-text-hover-color: ${this.colors.wg24_mainm_lhcolor};
          --nav-background-hover-color: ${this.colors.wg24_menu_hbgcolor};

          --banner-background-color: ${this.colors.wg24_top_cart_bgcol};
          --banner-nav-color: ${this.colors.wg24_home_sbtn_bgcol};
          --banner-nav-hover-color: ${this.colors.wg24_home_sbtn_hbr_bgclr};
          --banner-nav-icon-color: ${this.colors.wg24_home_btn_hbr_txclr};
          --banner-text-color: ${this.colors.wg24_topcart_te_colo};
          --banner-button-color: ${this.colors.wg24_btnsearch_color};
          --banner-button-text-color: ${this.colors.wg24_link_hover_color_stick};

          --aside-background-color: ${this.colors.wg24_bg_color_menu_lateral};
          --aside-border-color: ${this.colors.wg24_border_color_menu_lateral};
          --aside-text-color: ${this.colors.wg24_link_color_menu_lateral};
          --aside-title-color: ${this.colors.wg24_title_color_menu_lateral};
          --aside-checked-color: ${this.colors.wg24_icon_checked_color_menu_lateral};
          --aside-button-color: ${this.colors.wg24_button_color_menu_lateral};
          --aside-button-text-color: ${this.colors.wg24_button_text_color_menu_lateral};

          --product-background-color: ${this.colors.wg24_product_bx_bgclr};
          --product-border-color: ${this.colors.wg24_product_bx_bdrclr};
          --product-discount-color: ${this.colors.wg24_product_box_sicon_bgcolor};
          --product-discount-text-color: ${this.colors.wg24_product_box_sale_nicontcolor};
          --product-name-color: ${this.colors.wg24_product_box_n_col};
          --product-name-hover-color: ${this.colors.wg24_product_box_nhov_col};
          --product-old-price-color: ${this.colors.wg24_product_box_oldprce_col};
          --product-price-color: ${this.colors.wg24_product_box_price_col};

          --footer-main-color: ${this.colors.wg24_footer_bg_col};
          --footer-main-border-top-color: ${this.colors.wg24_fot_line};
          --footer-title-color: ${this.colors.wg24_fotheadin_col};
          --footer-link-color: ${this.colors.wg24_fotlin_col};
          --footer-link-hover-color: ${this.colors.wg24_fotlin_h_col};
          --footer-circle-color: ${this.colors.wg24_fotlinicon_h_col};
          --footer-icon-color: ${this.colors.wg24_fotlinicon_col};
          --footer-copyright-color: ${this.colors.wg24_fot_bbg_col};
          --footer-copyright-text-color: ${this.colors.wg24_fot_powerred_col};
          --footer-copyright-text-hover-color: ${this.colors.wg24_fot_powerred_hover_col};
        }
      `;
    },
  },
};