import { ButtonBase, Popover } from "@mui/material";
import { startTransition, useState } from "react";
import { HexAlphaColorPicker } from "react-colorful";

interface Props {
  color: string;
  onChange: (color: string) => void;
}

export default function CircleColorPicker({ color, onChange }: Props) {
  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);

  return (
    <>
      <ButtonBase
        onClick={(event) => setAnchorEl(event.currentTarget)}
        sx={{
          aspectRatio: 1,
          height: "22px",
          width: "22px",
          minWidth: "22px",
          borderRadius: "50%",
          backgroundColor: color,
          border: "1px solid #4D4D4D",
        }}
      />
      <Popover
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={() => setAnchorEl(null)}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        slotProps={{
          paper: {
            sx: {
              p: "20px",
            },
            style: {
              backgroundColor: color,
            },
          },
        }}
      >
        <HexAlphaColorPicker color={color} onChange={(color) => startTransition(() => onChange(color))} />
      </Popover>
    </>
  );
}