import { usePage } from "@inertiajs/react";
import { useEffect } from "react";

import EnumSelect from "@/back/Components/Inputs/EnumSelect";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";

interface Props {
  name: string;
  selected: number;
  required: boolean;
  label: string;
  setData: (name: string, value: number | null) => void;
}

export default function StaticRouteSelect(props: Readonly<Props>) {
  const { name, selected, required, label, setData } = props;

  const enumStaticRoutesEnum = usePage().props
    .enumStaticRoutesEnum as LaravelEnum | null;

  const transSelectValue = str(
    trans("uwil-backend::back.static_route.select_value"),
  )
    .ucFirst()
    .value();
  const transNoRoutes = str(
    trans("uwil-backend::back.static_route.no_route_defined"),
  )
    .ucFirst()
    .value();

  useEffect(() => {
    if (!enumStaticRoutesEnum) {
      setData(name, null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!enumStaticRoutesEnum) {
    return <p className="text-sm text-muted-foreground">{transNoRoutes}</p>;
  }

  return (
    <EnumSelect
      name={name}
      label={label}
      placeholder={transSelectValue}
      selected={selected}
      options={enumStaticRoutesEnum}
      setData={(fieldName, value) => {
        setData(
          fieldName,
          typeof value === "number"
            ? value
            : value !== null
              ? Number(value)
              : null,
        );
      }}
      required={required}
    />
  );
}