import DesignProvider from '@components/DesignPanel/DesignProvider';
import { __ } from '@wordpress/i18n';
import { DesignPanel } from '@components/DesignPanel/DesignPanel';
import { spacingPanel } from '@tailwind/spacing';
import { dimensionPanel } from '@tailwind/dimension';
import { appearancePanel } from '@tailwind/appearance';
import { advancedstylePanel } from '@tailwind/advancedstyle';
import { depthorderPanel } from '@tailwind/depthorder';
import { transformPanel } from '@tailwind/transform';
import { borderPanel, dividerPanel } from '@tailwind/border';
import { colorPanel } from '@tailwind/color';
import { typographyPanel } from '@tailwind/typography';
import { flexgridPanel } from '@tailwind/flexgrid';
import { liststylePanel } from '@tailwind/list';
import { bitesPanel } from '@tailwind/bites';
import type { BiteStyleProps } from '@components/DesignPanel/types';

type currentEmit = {
  currentStyle: BiteStyleProps[];
  currentClass: string;
};

export const StyleControl = (props: any) => {
  // get attributes from props
  const { attributes, setAttributes, currentTab, setCurrentTab, clientId } =
    props;
  const { biteStyle, biteClass } = attributes;

  const ApplyDesign = ({ currentStyle, currentClass }: currentEmit) => {
    setAttributes({
      biteClass: currentClass,
      biteStyle: currentStyle,
    });
  };

  return (
    <DesignProvider key={`styleprovider__${clientId}`}>
      <DesignPanel
        defaultDesign={biteStyle}
        defaultClass={biteClass}
        currentTab={currentTab || null}
        setCurrentTab={setCurrentTab || null}
        content={{
          panel: 'style',
        }}
        panels={[
          spacingPanel,
          dimensionPanel,
          appearancePanel,
          transformPanel,
          colorPanel,
          typographyPanel,
          depthorderPanel,
          borderPanel,
          dividerPanel,
          advancedstylePanel,
          flexgridPanel,
          liststylePanel,
          bitesPanel,
        ]}
        emitDesign={(current: currentEmit) => ApplyDesign(current)}
      />
    </DesignProvider>
  );
};