import React, { useState } from "react";
import { SketchPicker, ColorResult } from "react-color";
import { api } from "../../utils/api";

const ColorPicker = ({ userId }: { userId: string }) => {
  const [color, setColor] = useState("#000000");
  const [updateColor, setUpdateColor] = useState(false);
  const updateUserSettings = api.lambda.updateUserSettings.useMutation();

  if (updateColor) {
    updateUserSettings.mutate({ userId: userId, themeColor: color });
    setUpdateColor(false);
  }

  const handleChange = (newColor: ColorResult) => {
    setColor(newColor.hex);
    setUpdateColor(true);
  };
  return (
    <div>
      <SketchPicker color={color} onChange={handleChange} />
    </div>
  );
};

export default ColorPicker;