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 { useHighlightState } from '../highlight-block-store';

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

const bgColors = ['bg-amber-50', 'bg-gray-50', 'bg-red-50', 'bg-green-50'];

const borderColors = [
  'bg-amber-200',
  'bg-gray-200',
  'bg-red-200',
  'bg-green-200',
];

export function ColorDropdownMenu({ children }: ColorDropdownMenuProps) {
  const { setHighlightState } = useHighlightState();

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

  const setBgColor = (bgColor: string) => {
    setHighlightState({ bgColor });
  };

  const setBorderColor = (color: string) => {
    const borderColor = color.replace('bg', 'border');
    setHighlightState({ borderColor });
  };

  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>
            <div className="my-1">边框颜色</div>
            <div className="flex h-6 w-full flex-row gap-1">
              {borderColors.map((color) => {
                return (
                  <div
                    key={color}
                    className={`${color} h-6 w-6 cursor-pointer hover:ring-border`}
                    onClick={() => {
                      setBorderColor(color);
                    }}
                  />
                );
              })}
            </div>
          </div>
          <div>
            <div className="my-1">填充颜色</div>
            <div className="flex h-6 w-full flex-row gap-1">
              {bgColors.map((color) => {
                return (
                  <div
                    key={color}
                    className={`${color} h-6 w-6 cursor-pointer hover:ring-border`}
                    onClick={() => {
                      setBgColor(color);
                    }}
                  />
                );
              })}
            </div>
          </div>
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
