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

export function StylePanel({ attributes, setAttributes, uniqueClass, activeTab, setActiveTab, isLinked }) {
  const tabs = [
    { name: 'main',    label: __('Main',    'axcelersblocks') },
    { name: 'content', label: __('Content', 'axcelersblocks') },
    { name: 'icon',    label: __('Icon',    'axcelersblocks') },
    { name: 'svg',     label: __('SVG',     '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}
            iconSelector=".icon"
            tabs={tabs}
            tabSelectors={{ content: '.axcelersblocks-bodycopy__content' }}
            renderContent={(currentTab) => (
              <>
                {currentTab === 'main' && (
                  <>
                    <LayoutControls    attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                    <SpacingControls   attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                    <SizingControl     attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                    <TypographyControl attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                    <BackgroundControl attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                    <BorderControl     attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                    <PositionControl   attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                    <EffectControl     attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                  </>
                )}
                {currentTab === 'content' && (
                  <ContentStyleControls attributes={attributes} setAttributes={setAttributes} />
                )}
                {currentTab === 'icon' && (
                  <>
                    <IconSizeControl   attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                    <IconStyleControls attributes={attributes} setAttributes={setAttributes} activeStyleTab={currentTab} />
                  </>
                )}
                {currentTab === 'svg' && (
                  <SvgStyleControls attributes={attributes} setAttributes={setAttributes} />
                )}
                {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>
  );
}
