import { MuiColorInput } from "mui-color-input";
import { PropEdit } from "./PropEdit";

export function PropColorPicker(p: {
  editable: boolean;
  label: string;
  value?: string;
  onChange: (v: string | undefined) => void;
}): React.ReactElement {
  if (!p.editable) {
    if (!p.value) return <></>;

    return <PropEdit editable={false} label={p.label} value={`#${p.value}`} />;
  }

  return (
    <MuiColorInput
      value={"#" + (p.value ?? "")}
      fallbackValue="#ffffff"
      format="hex"
      onChange={(_v, c) => p.onChange(c.hex.substring(1))}
    />
  );
}
