// src/withInspectorControl.tsx

import DesignProvider from '@components/DesignPanel/DesignProvider';
import { DesignPanel } from '@components/DesignPanel/DesignPanel';
import { motionEffectsPanel, transitionPanel } from '@tailwind/motion';
import { bitesPanel } from '@tailwind/bites';

import type { BiteStyleProps } from '@components/DesignPanel/types';

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

export const MotionControl = (props: any) => {
  // get attributes from props
  const { attributes, setAttributes, currentTab, setCurrentTab, clientId } =
    props;
  const { biteMotionClass, biteMotion } = attributes;

  const ApplyDesign = ({ currentStyle, currentClass }: currentEmit) => {
    setAttributes({
      biteMotionClass: currentClass,
      biteMotion: currentStyle,
    });
  };

  return (
    <>
      <DesignProvider key={`motionprovider__${clientId}`}>
        <DesignPanel
          defaultDesign={biteMotion}
          defaultClass={biteMotionClass}
          currentTab={currentTab || null}
          content={null}
          setCurrentTab={setCurrentTab || null}
          panels={[transitionPanel, motionEffectsPanel, bitesPanel]}
          emitDesign={(current: currentEmit) => ApplyDesign(current)}
        />
      </DesignProvider>
    </>
  );
};