import React from "react";
import { FormSelectField } from "@arcteryx/components-form";
import { useTranslation } from "react-i18next";

const FsSelect = ({ id, label, list, required, defaultValue, name, errors, register, watch }) => {
  const { t } = useTranslation("components-formstack");
  const [currentValue] = watch([name]);
  const error = errors[name];
  const valid = error === undefined && currentValue;
  const validSimplePropsForm = {
    labelText: label,
    placeHolderText: t("Please choose a value"),
    list,
    disallowEmptyOption: false,
  };

  return (
    <FormSelectField
      id={id}
      label={label}
      required={required}
      defaultValue={defaultValue}
      list={list}
      valid={valid}
      error={errors[name]}
      {...register(name, {
        required: required && t("This field is required."),
      })}
      {...validSimplePropsForm}
    />
  );
};

export default FsSelect;