import * as React from "react";
import { ThemeOptions, ContextOptions } from "../context";

interface ThemeProviderProps {
  context: ContextOptions;
}

export default class ThemeProvider extends React.Component<ThemeProviderProps, {}> {
  componentDidUpdate() {
    const { context } = this.props;
    const { theme } = context

    if (theme) {
      if (typeof theme === 'string') {
        console.log('Currently only custom themes are supported...')
      } else {
        let themeOptions: ThemeOptions = theme;
        this.loadCustomTheme(themeOptions);
      }
    }
  }

  private loadCustomTheme(themeOptions: ThemeOptions) {
    if (themeOptions.filterBoxBackgroundColor) {
      document.body.style.setProperty('--frontegg-filter-box-background-color', themeOptions.filterBoxBackgroundColor);
    }

    if (themeOptions.filterBoxTextColor) {
      document.body.style.setProperty('--frontegg-filter-box-text-color', themeOptions.filterBoxTextColor);
    }

    if (themeOptions.tableHeaderBackgroundColor) {
      document.body.style.setProperty('--frontend-table-header-background-color', themeOptions.tableHeaderBackgroundColor);
    }

    if (themeOptions.tableHeaderTextColor) {
      document.body.style.setProperty('--frontend-table-header-text-color', themeOptions.tableHeaderTextColor);
    }

    if (themeOptions.addButtonBackgroundColor) {
      document.body.style.setProperty('--frontend-add-button-background-color', themeOptions.addButtonBackgroundColor);
    }

    if (themeOptions.addButtonTextColor) {
      document.body.style.setProperty('--frontend-add-button-text-color', themeOptions.addButtonTextColor);
    }

    if (themeOptions.deleteButtonBackgroundColor) {
      document.body.style.setProperty('--frontend-delete-button-background-color', themeOptions.deleteButtonBackgroundColor);
    }

    if (themeOptions.deleteButtonColor) {
      document.body.style.setProperty('--frontend-delete-button-color', themeOptions.deleteButtonColor);
    }
  }

  render() {
    return <React.Fragment>
      {this.props.children}
    </React.Fragment>
  }
}