import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import { useWidget } from "../context/WidgetContext";
import { t } from "../translations";
import { ChevronDown } from "lucide-react";

function MoveWidgetDropdown() {
  const { widgetPosition, setWidgetPosition, currentLanguage } = useWidget();

  const handlePositionChange = (position) => {
    setWidgetPosition(position);
  };

  const positionOptions = [
    { value: 'right', label: t('right', currentLanguage), icon: '→' },
    { value: 'left', label: t('left', currentLanguage), icon: '←' }
  ];

  return (
      <div className="wideaccess-move-widget-dropdown">
        <DropdownMenu modal={false}>
          <DropdownMenuTrigger asChild>
            <button
                className="wideaccess-dropdown-trigger"
                aria-label={t('moveWidget', currentLanguage)}
            >
            <span className="wideaccess-move-widget-option">
              <span className="wideaccess-move-widget-text">{t('moveWidget', currentLanguage)}</span>
            </span>
              <ChevronDown className="h-4 w-4 opacity-50" style={{ marginLeft: 'auto' }} />
            </button>
          </DropdownMenuTrigger>
        <DropdownMenuContent
          className="wideaccess-dropdown-content"
          align="start"
        >
          {positionOptions.map((option) => (
                <DropdownMenuItem
                    key={option.value}
                    onClick={() => handlePositionChange(option.value)}
                    className={`wideaccess-dropdown-item ${option.value === widgetPosition ? 'wideaccess-dropdown-item-active' : ''}`}
                >
              <span className="wideaccess-move-widget-option">
                <span className="wideaccess-move-widget-text">{option.label}</span>
              </span>
                </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
  );
}

export default MoveWidgetDropdown;