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

const FsTopic = ({ id, label, list, required, defaultValue, name, errors, register, watch, onShowOrderNumberInput, onTopicSelected, onShowSubTopicInput }) => {
  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: ['Please choose a value', ...list],
    disallowEmptyOption: false,
  };

  useEffect(() => {
    if (currentValue) {
      onShowSubTopicInput(true);
    }
    if (currentValue === 'Orders') {
      onShowOrderNumberInput(true);
    } else {
      onShowOrderNumberInput(false);
    }
    onTopicSelected(currentValue);
  }, [currentValue]);
  
  return (
    <FormSelectField
      id={id}
      label={label}
      required={required}
      defaultValue={defaultValue}
      list={['Please choose a value', ...list]}
      valid={valid}
      error={errors[name]}
      {...register(name, {
        required: required && t("This field is required."),
      })}
      {...validSimplePropsForm}
    />
  );
};

export default FsTopic;