import type { Brand, BrandProduct } from "../../domain/types";
import { useI18n } from "../../i18n/I18nContext";
import { Select } from "../ui";
import { ProductContextReadiness } from "./ProductContextReadiness";

type Props = {
  brands: Brand[];
  products: BrandProduct[];
  brandId: string;
  productId: string;
  disabled?: boolean;
  onBrandChange: (id: string) => void;
  onProductChange: (id: string) => void;
};

export function ProductWatchForm({ brands, products, brandId, productId, disabled, onBrandChange, onProductChange }: Props) {
  const { t } = useI18n();
  const brand = brands.find((b) => b.id === brandId);
  const product = products.find((p) => p.id === productId);
  return (
    <div className="hb-radar-product-context">
      <Select name="radar-watch-brand" label={t("radar.inbox.brand")} value={brandId} disabled={disabled} onChange={(e) => onBrandChange(e.target.value)}>
        <option value="">{t("radar.watches.skipBrand")}</option>
        {brands.map((b) => <option key={b.id} value={b.id}>{b.display_name}</option>)}
      </Select>
      <Select name="radar-watch-product" label={t("radar.inbox.product")} value={productId} disabled={disabled || !brandId} onChange={(e) => onProductChange(e.target.value)}>
        <option value="">{t("radar.watches.skipProduct")}</option>
        {products.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}
      </Select>
      <ProductContextReadiness brand={brand} product={product} />
    </div>
  );
}
