// External Dependencies
import React, { Component } from 'react';

// Internal Dependencies
import './style.css';


class GfStylerModule extends Component {

  static slug = 'gfdv_gf_styler';

  static css(props) {

    const additionalCss = [];

    // Form field bg color
    additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style input:not([type=submit]), %%order_class%% .dvppl-gf-style .gform_wrapper input[type=email], %%order_class%% .dvppl-gf-style .gform_wrapper input[type=text], %%order_class%% .dvppl-gf-style .gform_wrapper input[type=password], %%order_class%% .dvppl-gf-style .gform_wrapper input[type=url], %%order_class%% .dvppl-gf-style .gform_wrapper input[type=tel], %%order_class%% .dvppl-gf-style .gform_wrapper input[type=number], %%order_class%% .dvppl-gf-style .gform_wrapper input[type=date], %%order_class%% .dvppl-gf-style .gform_wrapper select, %%order_class%% .dvppl-gf-style .gform_wrapper .chosen-container-single .chosen-single, %%order_class%% .dvppl-gf-style .gform_wrapper .chosen-container-multi .chosen-choices, %%order_class%% .dvppl-gf-style .gform_wrapper textarea, %%order_class%% .dvppl-gf-style .gfield_checkbox input[type='checkbox'] + label:before, %%order_class%% .dvppl-gf-style .gfield_radio input[type='radio'] + label:before",
      declaration: `background-color: ${props.form_background_color}`
    }]);

    // Form field active color
    additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style .gform_wrapper input:not([type=submit]):focus, %%order_class%% .dvppl-gf-style .gform_wrapper select:focus, %%order_class%% .dvppl-gf-style .gform_wrapper textarea:focus",
      declaration: `border-color: ${props.form_field_active_color};`
    }]);

    // Checkbox & radio bg color
    additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style .gfield_checkbox input[type=checkbox] + label:before, %%order_class%% .dvppl-gf-style .gfield_radio input[type=radio] + label:before, %%order_class%% .dvppl-gf-style .ginput_container_consent input[type=checkbox]",
      declaration: `background-color: ${props.cr_background_color};`
    }]); 

    additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style .gfield_checkbox input[type=checkbox] + label:before, %%order_class%% .dvppl-gf-style .gfield_radio input[type=radio] + label:before, %%order_class%% .dvppl-gf-style .ginput_container_consent input[type=checkbox]",
      declaration: `width: ${props.cr_size}; height: ${props.cr_size}; border-width: ${ props.cr_border_size };`
    }]);

    additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style .gfield_checkbox input[type=checkbox]:checked + label:before, %%order_class%% .dvppl-gf-style .ginput_container_consent input[type=checkbox]:checked + label:before",
      declaration: `color: ${props.cr_selected_color}; font-size: calc( ${props.cr_size} / 1.2 );`
    }]);

    additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style .gfield_radio input[type=radio]:checked + label:before",
      declaration: `background-color: ${props.cr_selected_color}; box-shadow:inset 0px 0px 0px 4px ${props.cr_selected_color};`
    }]);

		additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style .gfield_checkbox input[type=checkbox] + label:before, %%order_class%% .dvppl-gf-style .gfield_radio input[type=radio] + label:before, %%order_class%% .dvppl-gf-style .ginput_container_consent input[type=checkbox] + label:before",
      declaration: `border-color: ${props.cr_border_color};`
    }]);

    additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style .gfield_checkbox li label, %%order_class%% .dvppl-gf-style .gfield_radio li label, %%order_class%% .dvppl-gf-style .ginput_container_consent label",
      declaration: `color: ${props.cr_label_color};`
    }]);
    
    // Message
    additionalCss.push([{
      selector: "%%order_class%% .dvppl-gf-style .gform_wrapper .gfield_description.validation_message",
      declaration: `color: ${props.gf_message_color};`
    }]);

    additionalCss.push([{
      selector: "%%order_class%% ",

      declaration: `color: ${props.gf_success_message_color}; background-color: ${props.gf_success_message_color}; border-color: ${props.gf_success_border_color};`
    }]);

    additionalCss.push([{
      selector: "%%order_class%% .gform_wrapper div.validation_error",

      declaration: `color: ${props.gf_error_message_color}; background-color: ${props.gf_error_message_bg_color}; border-color: ${props.gf_error_border_color};`
    }]);

    return additionalCss;
  }

  render() {
    return (
	   <div dangerouslySetInnerHTML={{ __html: this.props.__gfform }} />
    );
  }
}

export default GfStylerModule;