import { __ } from '@wordpress/i18n';
import { PanelBody, Button } from '@wordpress/components';
import { background } from '@wordpress/icons';
import { useState } from '@wordpress/element';
import { useDevice } from '../../controls/DeviceContext';

import ColorControl from './ColorControl';
import LayerControl from './LayerControl';
import LayerList from './LayerList';

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

  // Ensure objects exist
  const backgroundColor = attributes.backgroundColor || { desktop: '', tablet: '', mobile: '' };
  const backgroundColor__hover = attributes.backgroundColor__hover || { desktop: '', tablet: '', mobile: '' };

  const backgroundLayers = attributes.backgroundLayers || { desktop: [], tablet: [], mobile: [] };
  const backgroundLayers__hover = attributes.backgroundLayers__hover || { desktop: [], tablet: [], mobile: [] };

  // Local edit state for LayerControl
  const [isEditing, setIsEditing] = useState(false);
  const [editingIndex, setEditingIndex] = useState(null);

  const updateDeviceAttribute = (attribute, value) => {
    setAttributes({
      [attribute]: {
        ...(attributes[attribute] || {}),
        [activeDevice]: value,
      },
    });
  };

  const handleEditLayer = (index) => {
    setIsEditing(true);
    setEditingIndex(index);
  };
  const handleCancelEdit = () => {
    setIsEditing(false);
    setEditingIndex(null);
  };

  const isMain = activeStyleTab === 'main';
  const colorKey = isMain ? 'backgroundColor' : 'backgroundColor__hover';
  const layersKey = isMain ? 'backgroundLayers' : 'backgroundLayers__hover';

  const currentColor = isMain ? backgroundColor : backgroundColor__hover;
  const currentLayersObj = isMain ? backgroundLayers : backgroundLayers__hover;
  const currentLayers = currentLayersObj[activeDevice] || [];

  const resetBackground = () => {
    setAttributes({
      [colorKey]: { ...(attributes[colorKey] || {}), [activeDevice]: '' },
      [layersKey]: { ...(attributes[layersKey] || {}), [activeDevice]: [] },
    });
  };

  return (
    <PanelBody
      className="background-controls-wrapper"
      title={
        <span className="title" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {background}
          {isMain ? __('Background', 'axcelersblocks') : __('Background (Hover)', 'axcelersblocks')}
        </span>
      }
      initialOpen={false}
    >
      <ColorControl
        title={__('Background Color', 'axcelersblocks')}
        attributeKey={colorKey}
        backgroundColor={currentColor}
        updateDeviceAttribute={updateDeviceAttribute}
        activeDevice={activeDevice}
      />

      <LayerList
        layers={currentLayers}
        activeDevice={activeDevice}
        onUpdateLayers={(newLayers) => updateDeviceAttribute(layersKey, newLayers)}
        onEditLayer={handleEditLayer}
      />

      <LayerControl
        layers={currentLayers}
        activeDevice={activeDevice}
        onUpdateLayers={(newLayers) => updateDeviceAttribute(layersKey, newLayers)}
        onEditLayer={handleEditLayer}
        onCancelEdit={handleCancelEdit}
        isEditing={isEditing}
        editingIndex={editingIndex}
      />

      <Button className="reset-btn" onClick={resetBackground}>
        {__('Reset', 'axcelersblocks')}
      </Button>
    </PanelBody>
  );
}
