import * as React from "react";
// import * as Types from "prop-types";
import { IntlProvider, addLocaleData } from "react-intl";
import * as en from "react-intl/locale-data/en";
import * as ar from "react-intl/locale-data/ar";
// import * as arTranslation from "../Assets/i18n/ar.txt";
// import * as enTranslation from "../Assets/i18n/en.txt";
//import axios from 'axios';
import { CachingService } from "../Services";

addLocaleData([...en, ...ar]);
const arTranslation = require('../Assets/i18n/ar.txt');
const enTranslation = require('../Assets/i18n/en.txt');
    const defaultValue: any = null;
    const { Provider, Consumer } = React.createContext(defaultValue);

class IntlProviderWrapper extends React.Component<any, any> {
   private switchToEnglish : any;
   private switchToArabic : any;
   private _cachingService = new CachingService();
  constructor(props: any) {
    super(props);

    this.switchToEnglish = () => {
        this.getTranslation(enTranslation);
        this.setState({ locale: "en"});
        this._cachingService.storePersistant("Language", 0);

        // document.querySelector('html')!.setAttribute("dir", "ltr");
        // document.querySelector('html')!.setAttribute("lang", "en");
        // document.querySelector('#style-rtl')!.setAttribute("href", "");
        window.location.reload();
    }

    this.switchToArabic = () => {
      this.getTranslation(arTranslation);
      this.setState({ locale: "ar" });
      this._cachingService.storePersistant("Language", 1);

      // document.querySelector('html')!.setAttribute("dir", "rtl");
      // document.querySelector('html')!.setAttribute("lang", "ar");
      // document.querySelector('#style-rtl')!.setAttribute("href", "./content/style-rtl.css");
      window.location.reload();

    }


    // pass everything in state to avoid creating object inside render method (like explained in the documentation)


    this.state = {
      locale: "en",
      messages: [],
      switchToEnglish: this.switchToEnglish, 
      switchToArabic: this.switchToArabic,
      
    };
   
  }
  getTranslation(url: string) {
    // return new Promise((resolve, reject) => { 
    //     axios.get(url).then((response) => {
    //         this.setState({messages: response.data})
    //      resolve(response.data);
    //     }, (err) => {
    //         reject(err);
    //     });
    //  });
}
componentDidMount(){
  if(this._cachingService.readPersistant('language') == null || this._cachingService.readPersistant("Language") == 0 || this._cachingService.readPersistant("Language") == "0"){
    this.getTranslation(enTranslation);
    this.setState({ locale: "en"});
    this._cachingService.storePersistant("Language", 0);

    // document.querySelector('html')!.setAttribute("dir", "ltr");
    // document.querySelector('html')!.setAttribute("lang", "en");
    // document.querySelector('#style-rtl')!.setAttribute("href", "");
      
  } else {
    this.getTranslation(arTranslation);
    this.setState({ locale: "ar" });
    this._cachingService.storePersistant("Language", 1);

    // document.querySelector('html')!.setAttribute("dir", "rtl");
    // document.querySelector('html')!.setAttribute("lang", "ar");
    // document.querySelector('#style-rtl')!.setAttribute("href", "./content/style-rtl.css");
  }
}

  render() {
    const { children } = this.props;
    const { locale, messages } = this.state;
    return (
      <Provider value={this.state}>
      {this.state.messages && 
                <IntlProvider
                key={locale}
                locale={locale}
                messages={messages}
                defaultLocale="en"
                >
                {children}
                </IntlProvider>
      }
       
      </Provider>
    );
  }
}

export { IntlProviderWrapper as IntlProvider, Consumer as IntlConsumer };