const { useState, useRef } = React;
const { __ } = wp.i18n;
const { ColorIndicator, ToggleControl, TextControl, Popover, ColorPicker } = wp.components;

// Import custom components and context.
import DeviceSwitcher from './DeviceSwitcher';
import { useDevice } from './DeviceContext';

const TextShadowControl = ({ label = 'Text Shadow', value = {}, onChange }) => {

  // Access the active device context (desktop, tablet, mobile).
  const { activeDevice } = useDevice();
  const colorRef = useRef();
  const [ showPicker, setShowPicker ] = useState( false );
  const enable = value?.enable ?? false;

  // Get current device values or fallback.
  const currentDeviceValues = value?.[activeDevice] || {
    x: '1',
    y: '4',
    blur: '0',
    color: 'rgba(0,0,0,0.2)'
  };

  const { x = '1', y = '4', blur = '0', color = 'rgba(0,0,0,0.2)' } = currentDeviceValues;

  const updateDeviceValue = ( key, val ) => {
    onChange({
      ...value,
      [activeDevice]: {
        ...( value?.[activeDevice] || {}),
        [key]: val
      }
    });
  };

  const updateToggle = ( val ) => {
    onChange({ ...value, enable: val });
  };

  return (
    <div className="components-panel__row tax0 ojb-textshadow-style">
      <div className="ojb-label-wrap">
        <ToggleControl
          label={__( label, '' )}
          checked={enable}
          onChange={updateToggle}
        />
        <div className="ojb-responsive-tabs">
            <DeviceSwitcher/>
        </div>
      </div>

      {enable && (
        <div
          style={{
            border: '1px solid #dcdcde',
            padding: '5px',
            borderRadius: '4px',
            marginTop: '10px'
          }}
        >
          <div className="ojb-textshadow-inner">
            <div className="components-base-control">
              <label class="components-base-control__label">{__( 'Color', '' )}</label>

               {/* Color Picker Trigger. */}
                <div ref={colorRef}>
                <ColorIndicator
                    colorValue={color || 'rgba(0,0,0,0.2)'}
                    onClick={() => setShowPicker( ! showPicker )}
                    style={{
                      width: 32,
                      height: 32,
                      border: '1px solid #ccc',
                      borderRadius: '50%',
                      cursor: 'pointer',
                      background: color || 'rgba(0,0,0,0.2)'
                    }}
                />
                </div>

                {/* ColorPicker in Popover. */}
                {showPicker && (
                <Popover
                    position="bottom left"
                    onClose={() => setShowPicker( false )}
                    anchorRef={colorRef}
                >
                    <div style={{ padding: '10px' }}>
                    <ColorPicker
                        color={color}
                        onChangeComplete={( val ) => {
                            const rgba = `rgba(${val.rgb.r}, ${val.rgb.g}, ${val.rgb.b}, ${val.rgb.a})`;
                            updateDeviceValue( 'color', rgba );
                        }}
                        enableAlpha
                    />
                    </div>
                </Popover>
                )}
            </div>

            <TextControl
              label={__( 'X', '' )}
              value={x}
              type="number"
              onChange={( val ) => updateDeviceValue( 'x', val )}
              style={{ width: '50px' }}
            />
            <TextControl
              label={__( 'Y', '' )}
              value={y}
              type="number"
              onChange={( val ) => updateDeviceValue( 'y', val )}
              style={{ width: '50px' }}
            />
            <TextControl
              label={__( 'Blur', '' )}
              value={blur}
              type="number"
              onChange={( val ) => updateDeviceValue( 'blur', val )}
              style={{ width: '50px' }}
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default TextShadowControl;