import { setTheme } from "@/redux/app/app.actions";
import { selectTheme } from "@/redux/app/app.selectors";
import React from "react";
import { SegmentedButtons } from "react-native-paper";
import { useDispatch, useSelector } from "react-redux";

/**
 * Example component showing how to use the useTheme hook
 * and how to dispatch theme changes
 */
export const ThemeSelector = () => {
  const dispatch = useDispatch();

  const currentTheme = useSelector(selectTheme);

  const handleThemeChange = (theme: "light" | "dark" | "system") => {
    dispatch(setTheme(theme));
  };

  return (
    <SegmentedButtons
      value={currentTheme}
      onValueChange={handleThemeChange}
      buttons={[
        {
          value: "light",
          label: "Light",
        },
        {
          value: "dark",
          label: "Dark",
        },
        { value: "system", label: "System" },
      ]}
    />
  );
};