import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import { useDevice } from '../../controls/DeviceContext';
import EffectsMain from '../icons/EffectsMain';

import Effects from './Effects';
import EffectsHover from './EffectsHover';
import { DEFAULT_TRANSFORM_VALUES } from './transformUtils';

export default function EffectsControls({ attributes, setAttributes, activeStyleTab }) {
  const { activeDevice } = useDevice();

  // ensure defaults so children never crash
  const effect = attributes.effect || {
    desktop: { boxShadow:{xOffset:'',yOffset:'',blurRadius:'',spreadRadius:'',color:'',inset:false}, transition:{property:'',duration:'',timingFunction:'',delay:''}, filter:{blur:'',brightness:'',contrast:'',grayscale:'',hueRotate:'',invert:'',opacity:'',saturate:'',sepia:''}, textShadow:{xOffset:'',yOffset:'',blurRadius:'',color:''}, transform:{ ...DEFAULT_TRANSFORM_VALUES }, opacity:'', visibility:'' },
    tablet:  { boxShadow:{xOffset:'',yOffset:'',blurRadius:'',spreadRadius:'',color:'',inset:false}, transition:{property:'',duration:'',timingFunction:'',delay:''}, filter:{blur:'',brightness:'',contrast:'',grayscale:'',hueRotate:'',invert:'',opacity:'',saturate:'',sepia:''}, textShadow:{xOffset:'',yOffset:'',blurRadius:'',color:''}, transform:{ ...DEFAULT_TRANSFORM_VALUES }, opacity:'', visibility:'' },
    mobile:  { boxShadow:{xOffset:'',yOffset:'',blurRadius:'',spreadRadius:'',color:'',inset:false}, transition:{property:'',duration:'',timingFunction:'',delay:''}, filter:{blur:'',brightness:'',contrast:'',grayscale:'',hueRotate:'',invert:'',opacity:'',saturate:'',sepia:''}, textShadow:{xOffset:'',yOffset:'',blurRadius:'',color:''}, transform:{ ...DEFAULT_TRANSFORM_VALUES }, opacity:'', visibility:'' },
  };

  const effect__hover = attributes.effect__hover || {
    desktop: { boxShadow:{xOffset:'',yOffset:'',blurRadius:'',spreadRadius:'',color:'',inset:false}, transition:{property:'',duration:'',timingFunction:'',delay:''}, filter:{blur:'',brightness:'',contrast:'',grayscale:'',hueRotate:'',invert:'',opacity:'',saturate:'',sepia:''}, textShadow:{xOffset:'',yOffset:'',blurRadius:'',color:''}, transform:{ ...DEFAULT_TRANSFORM_VALUES }, opacity:'', visibility:'' },
    tablet:  { boxShadow:{xOffset:'',yOffset:'',blurRadius:'',spreadRadius:'',color:'',inset:false}, transition:{property:'',duration:'',timingFunction:'',delay:''}, filter:{blur:'',brightness:'',contrast:'',grayscale:'',hueRotate:'',invert:'',opacity:'',saturate:'',sepia:''}, textShadow:{xOffset:'',yOffset:'',blurRadius:'',color:''}, transform:{ ...DEFAULT_TRANSFORM_VALUES }, opacity:'', visibility:'' },
    mobile:  { boxShadow:{xOffset:'',yOffset:'',blurRadius:'',spreadRadius:'',color:'',inset:false}, transition:{property:'',duration:'',timingFunction:'',delay:''}, filter:{blur:'',brightness:'',contrast:'',grayscale:'',hueRotate:'',invert:'',opacity:'',saturate:'',sepia:''}, textShadow:{xOffset:'',yOffset:'',blurRadius:'',color:''}, transform:{ ...DEFAULT_TRANSFORM_VALUES }, opacity:'', visibility:'' },
  };

  return (
    <PanelBody
      className="effect-controls-wrapper"
      title={
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
					{activeStyleTab === 'main' && (
						<span className="axb-title-with-badge title">
							<EffectsMain />
							{__('Effects', 'axcelersblocks')}
						</span>
					)}
					{activeStyleTab === 'mainHover' && (
						<span className="axb-title-with-badge title">
							<EffectsMain />
							{__('Effects (Hover)', 'axcelersblocks')}
						</span>
					)}
        </div>
      }
      initialOpen={false}
    >
      {activeStyleTab === 'main' && (
        <Effects
          activeDevice={activeDevice}
          effect={effect}
          setAttributes={setAttributes}
        />
      )}

      {activeStyleTab === 'mainHover' && (
        <EffectsHover
          activeDevice={activeDevice}
          effect__hover={effect__hover}
          setAttributes={setAttributes}
        />
      )}
    </PanelBody>
  );
}
