import React, { Component } from 'react';
import Main from './container/Main';
import Header from './container/Header';
import Footer from './container/Footer';
import Layout from './container/Layout';
import Home from './components/Home';
import Travel from './components/Travel';
import BlankPage from './container/BlankPage';
import View from './components/View';
import Banner from './container/Banner';
import Card from './container/Card'
import ModalView from './container/Modal'
import Blogs from './container/Blogs'
import LikeShare from './container/BlogView/like-share'
import BlogSideBar from './container/BlogView/blog-sidebar'
import {Tabs, Tab} from 'react-bootstrap-tabs';
import { MainContext } from './context'
import 'bootstrap/dist/css/bootstrap.css';
import './components/theme/theme.sass'



export default class WebTemplates extends Component {
  constructor(props){
    super(props);
  }

  getColorsName(color) {
    return color.label.toLowerCase().replace(/ /g,"-");
  }

  getCustomStyled(colorsData){
    const colors = typeof colorsData === 'string' ? JSON.parse(colorsData) : colorsData
    return(
      <style>{`\
      .wizard-style-theme {\
        --top-menu: ${ colors['top-menu'] };\
        --top-menu-font: ${ colors['top-menu-font'] };\
        --button: ${ colors['button'] };\
        --button-font: ${ colors['button-font'] };\
        --home-background: ${ colors['home-background'] };\
        --home-background-font: ${ colors['home-background-font'] };\
        --background: ${ colors['background'] };\
        --background-font: ${ colors['background-font'] };\
        --header-color: ${ colors['header-color'] };\
        --header-background: ${ colors['header-background'] };\
        --box-shadow: ${ colors['box-shadow'] || '#000000'} ;\
    }\
    `}</style>)
  }

  render() {
    return (
      <React.Fragment>
        { this.getCustomStyled(this.props.data?.colors || {} ) }
        <MainContext.Provider value={this.props.data}>
          {/* <div className="wizrd-blog-preview signup-preview"> */}
          <div className={`wizrd-blog-theme wizard-style-theme`}>
            <Main>
                {this.props.children}
            </Main>
          {/* </div> */}
          </div>
        </MainContext.Provider>
      </React.Fragment>
    );
  }
}

export  {
  Header,
  Footer,
  Layout,
  Home,
  Travel,
  BlankPage,
  Blogs,
  Banner,
  Card,
  LikeShare,
  Tabs,
  Tab,
  BlogSideBar,
  ModalView,
  View
};