import { __ } from '@wordpress/i18n';
import StyleTabs from '../../../components/style/StyleTabs';
import {
  LayoutControls, SpacingControls, SizingControl, BackgroundControl, BorderControl,
  PositionControl, EffectControl, ImageControls, LinkStyleControls,
} from '../../../components/style-controls';
import { DeviceProvider } from '../../../components/controls/DeviceContext';
import ResponsiveControl from '../../../components/controls/ResponsiveControl';
import { ImgSizingControl } from './ImgSizingControl';

export function StylePanel({ attributes, setAttributes, uniqueClass, activeTab, setActiveTab, isLinked }) {
  const tabs = [
    { name: 'main',  label: __('Main',  'axcelersblocks') },
    { name: 'image', label: __('Image', 'axcelersblocks') },
    ...(isLinked ? [
      { name: 'linked',       label: __('Linked',        'axcelersblocks') },
      { name: 'linkedHover',  label: __('Linked Hover',  'axcelersblocks') },
      { name: 'linkedFocus',  label: __('Linked Focus',  'axcelersblocks') },
      { name: 'linkedActive', label: __('Linked Active', 'axcelersblocks') },
    ] : []),
  ];

  return (
    <DeviceProvider>
      <div className="axcelersblocks-style-tab-wrapper">
        <ResponsiveControl renderControl={() => (
          <StyleTabs
            uniqueClass={uniqueClass}
            activeTab={activeTab}
            setActiveTab={setActiveTab}
            tabs={tabs}
            renderContent={(currentTab) => (
              <>
                {currentTab === 'main' && (
                  <>
                    {/* All controls that target the <figure> wrapper — pass 'main' so internal checks match.
                        Typography is intentionally omitted: an image figure has no text node. */}
                    <LayoutControls    attributes={attributes} setAttributes={setAttributes} activeStyleTab="main" />
                    <SpacingControls   attributes={attributes} setAttributes={setAttributes} activeStyleTab="main" />
                    <SizingControl     attributes={attributes} setAttributes={setAttributes} activeStyleTab="main" />
                    <BackgroundControl attributes={attributes} setAttributes={setAttributes} activeStyleTab="main" />
                    <BorderControl     attributes={attributes} setAttributes={setAttributes} activeStyleTab="main" />
                    <PositionControl   attributes={attributes} setAttributes={setAttributes} activeStyleTab="main" />
                    <EffectControl     attributes={attributes} setAttributes={setAttributes} activeStyleTab="main" />
                  </>
                )}
                {currentTab === 'image' && (
                  <>
                    {/* Controls that target <img> directly */}
                    <ImgSizingControl attributes={attributes} setAttributes={setAttributes} />
                    <ImageControls    attributes={attributes} setAttributes={setAttributes} activeStyleTab="image" />
                  </>
                )}
                {currentTab === 'linked' && (
                  <LinkStyleControls attributes={attributes} setAttributes={setAttributes} state="base" />
                )}
                {currentTab === 'linkedHover' && (
                  <LinkStyleControls attributes={attributes} setAttributes={setAttributes} state="hover" />
                )}
                {currentTab === 'linkedFocus' && (
                  <LinkStyleControls attributes={attributes} setAttributes={setAttributes} state="focus" />
                )}
                {currentTab === 'linkedActive' && (
                  <LinkStyleControls attributes={attributes} setAttributes={setAttributes} state="active" />
                )}
              </>
            )}
          />
        )} />
      </div>
    </DeviceProvider>
  );
}
