import React from 'react';
import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';

import { Button } from '@/components/plate-ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/plate-ui/dropdown-menu';

import { TStatusElement, useStatusState } from '../status-store';

type ColorDropdownMenuProps = {
  nodeType?: string;
  tooltip?: string;
} & DropdownMenuProps;

const CATEGORY_COLOR_MAP: Record<string, TStatusElement['category']> = {
  'bg-slate-500': 'gray',
  'bg-red-500': 'red',
  'bg-amber-500': 'yellow',
  'bg-green-700': 'green',
  'bg-blue-700': 'blue',
};

export function ColorDropdownMenu({ children }: ColorDropdownMenuProps) {
  const { setStatusValue } = useStatusState();

  const [open, setOpen] = React.useState(false);
  const onToggle = React.useCallback(
    (value = !open) => {
      setOpen(value);
    },
    [open, setOpen]
  );

  const setColor = (color: string) => {
    setStatusValue({ category: CATEGORY_COLOR_MAP[color] });
  };

  return (
    <DropdownMenu modal={false} open={open} onOpenChange={onToggle}>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="sms">
          {children}
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="start" sideOffset={8}>
        <div className="flex flex-col gap-3 p-2">
          <div className="flex h-6 w-full flex-row gap-1">
            {Object.keys(CATEGORY_COLOR_MAP).map((color) => {
              return (
                <div
                  key={color}
                  className={`${color} h-6 w-6 cursor-pointer rounded-md hover:ring-border`}
                  onClick={() => {
                    setColor(`${color}`);
                  }}
                />
              );
            })}
          </div>
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
