import { Form, Typography } from "antd";
import { useTranslation } from "react-i18next";
import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component.jsx";

const { Text, Paragraph } = Typography;

export default function ShopInfoNotificationsAutoadd({ bodyshop }) {
  const { t } = useTranslation();

  // Filter employee options to ensure active employees with valid IDs
  const employeeOptions = bodyshop?.employees?.filter((e) => e.active && e.user_email && e.id) || [];

  return (
    <div>
      <Paragraph>{t("bodyshop.fields.notifications.description")}</Paragraph>
      <Text type="secondary">{t("bodyshop.labels.notifications.followers")}</Text>
      {employeeOptions.length > 0 ? (
        <Form.Item
          normalize={(value) => (value || []).filter((id) => typeof id === "string" && id.trim() !== "")}
          name="notification_followers"
          rules={[
            {
              type: "array",
              message: t("general.validation.array")
            },
            {
              validator: async (_, value) => {
                if (!value || value.length === 0) {
                  return Promise.resolve(); // Allow empty array
                }
                const hasInvalid = value.some((id) => id == null || typeof id !== "string" || id.trim() === "");
                if (hasInvalid) {
                  return Promise.reject(new Error(t("bodyshop.fields.notifications.invalid_followers")));
                }
                return Promise.resolve();
              }
            }
          ]}
        >
          <EmployeeSearchSelectComponent
            style={{ minWidth: "100%" }}
            mode="multiple"
            options={employeeOptions}
            placeholder={t("bodyshop.fields.notifications.placeholder")}
            showEmail={true}
          />
        </Form.Item>
      ) : (
        <Text type="secondary">{t("bodyshop.fields.no_employees_available")}</Text>
      )}
    </div>
  );
}