import DesignProvider from '@components/DesignPanel/DesignProvider';
import { DesignPanel } from '@components/DesignPanel/DesignPanel';
import { flexgridPanel, areaPanel } from '@tailwind/flexgrid';
import { bitesPanel } from '@tailwind/bites';
import type { BiteStyleProps } from '@components/DesignPanel/types';

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

export const LayoutControl = (props: any) => {
  const {
    attributes,
    setAttributes,
    name,
    currentTab,
    setCurrentTab,
    clientId,
  } = props;
  const { flexClass, flexStyle } = attributes;

  const ApplyDesign = ({ currentStyle, currentClass }: currentEmit) => {
    setAttributes({
      flexClass: currentClass,
      flexStyle: currentStyle,
    });
  };

  return (
    <DesignProvider key={`layoutprovider__${clientId}`}>
      <DesignPanel
        defaultDesign={flexStyle}
        defaultClass={flexClass}
        content={{
          panel: 'motion',
        }}
        currentTab={currentTab || null}
        setCurrentTab={setCurrentTab || null}
        panels={
          name === 'blockbite/canvas'
            ? [areaPanel]
            : [flexgridPanel, bitesPanel]
        }
        emitDesign={(current: currentEmit) => ApplyDesign(current)}
      />
    </DesignProvider>
  );
};