import { useContext, useEffect } from '@wordpress/element';
import { DesignContext } from '@components/DesignPanel/DesignStore';

import { ToggleGroup } from '@components/ui/ToggleGroup';
import { DropdownPicker } from '@components/ui/DropdownPicker';

import { useStore } from 'zustand';

import DesktopIcon from 'blockbite-icons/dist/Desktop';
import ClipboardIcon from 'blockbite-icons/dist/Clipboard';
import DevicesIcon from 'blockbite-icons/dist/Devices';
import MobileIcon from 'blockbite-icons/dist/Mobile';
import DevicesPortraitIcon from 'blockbite-icons/dist/DevicesPortrait';
import { ResponsivePanelProps } from '@components/DesignPanel/types';
import { useSelect } from '@wordpress/data';

export const ResponsiveOptions = [
  {
    label: 'All',
    value: 'all',
    icon: <DevicesIcon />,
  },
  { label: 'Desktop Only', value: 'xl', icon: <DesktopIcon /> },
  {
    label: 'Mobile & Tablet Only',
    value: 'sm',
    icon: <DevicesPortraitIcon />,
  },
  {
    label: 'Wide Desktop Only',
    value: '2xl',
    icon: <DesktopIcon />,
  },
];

export const AdvancedResponsiveOptions = [
  { label: 'Tablet Only', value: 'md', icon: <ClipboardIcon /> },
  { label: 'Mobile Only', value: 'xs', icon: <MobileIcon /> },
];

export const ResponsivePanel: React.FC<ResponsivePanelProps> = ({}) => {
  const store = useContext(DesignContext);
  const { currentResponsive, setCurrentResponsive } = useStore(store);

  const device = useSelect((select) => {
    // @ts-ignore
    return select('biteStore/editor').getDevice();
  }, []);

  useEffect(() => {
    setCurrentResponsive(device);
  }, [device]);

  return (
    <div className="mb-3 flex flex-row items-center gap-2">
      <ToggleGroup
        display="icon"
        defaultPressed={currentResponsive}
        onPressedChange={(value) => {
          setCurrentResponsive(value);
        }}
        size="default"
        className="w-[180px]"
        options={ResponsiveOptions}
      ></ToggleGroup>
      <DropdownPicker
        options={AdvancedResponsiveOptions}
        defaultValue={currentResponsive}
        onPressedChange={(value) => {
          setCurrentResponsive(value);
        }}
      />
    </div>
  );
};

export default ResponsivePanel;