import DesignProvider from '@components/DesignPanel/DesignProvider';
import { DesignPanel } from '@components/DesignPanel/DesignPanel';
import { mediaPanel } from '@tailwind/media';
import { bitesPanel } from '@tailwind/bites';
import MediaPicker from '@components/ui/MediaPicker';

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

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

export const MediaControl = (props: any) => {
  // get attributes from props
  const { attributes, setAttributes, currentTab, setCurrentTab, clientId } =
    props;
  const { mediaStyle, mediaClass, media } = attributes;

  const ApplyDesign = ({ currentStyle, currentClass }: currentEmit) => {
    setAttributes({
      mediaClass: currentClass,
      mediaStyle: currentStyle,
    });
  };

  const handleMedia = (media: any) => {
    setAttributes({
      media: media,
    });
  };

  return (
    <div className="flex flex-col gap-2 pt-8">
      <MediaPicker
        mediaProps={media}
        mediaCallback={(media: any) => handleMedia(media)}
      />
      <DesignProvider key={`mediaprovider__${clientId}`}>
        <DesignPanel
          defaultDesign={mediaStyle}
          defaultClass={mediaClass}
          content={{
            media: media,
            panel: 'style',
          }}
          currentTab={currentTab || null}
          setCurrentTab={setCurrentTab || null}
          panels={[mediaPanel, bitesPanel]}
          emitDesign={(current: currentEmit) => ApplyDesign(current)}
        />
      </DesignProvider>
    </div>
  );
};