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

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 (
    <LayoutFormRow header={t("bodyshop.labels.notification_options")}>
      <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>
    </LayoutFormRow>
  );
}
