/**
 * 家书 FamilyBook · 设置里的「单选行」（鸿蒙端）
 *
 * 🔴🔴 为什么必须是**组件**而不是 `@Builder`（用户 2026-10-16 报的真 bug）：
 *     「设置里面这个"**默认视图**"，**都没法点**，也没有办法设置。」
 *     根因：原来是 `FbCalSettingsSheet.radioRow(label, hint, on: boolean, onTap)` ——
 *     **`@Builder` 的值类型参数（boolean）不参与状态观察**
 *     （SDK 规则 `r/quick-rules/05-state.md`：按值传递「状态变化刷新 ❌」）。
 *     ⇒ 点一下 `this.view` 确实变了、`FB_CAL_SETTINGS.setView()` 也确实写了，
 *       但**打勾 ✓ 与高亮底色的那份子树不重建** ⇒ 看着"点了没反应"。
 *     本项目已在 `FbTagChip` 上踩过同一个坑（见那份文件头），这里照同样办法修。
 *
 * ⚠️ 顺带说明：ForEach 的 key **不用**带选中态 —— 只要这一片是
 *    `@ComponentV2` + `@Param`，`active` 变了它自己就会重建。
 *    （`FbTagChip` 的 key 也只是标签名。）
 */

import { FbColors, FbMetric } from '../common/Theme';
import { FbDot } from './Widgets';

@ComponentV2
export struct FbCalOptionRow {
  /** 主文字 */
  @Param label: string = '';
  /** 副说明（小字；空则不占位） */
  @Param hint: string = '';
  /** 是否选中（**必须由父组件算好传进来**） */
  @Param active: boolean = false;
  /** 左侧色点（日历本那几行用它；空则不画） */
  @Param dotColor: string = '';
  /** 被点击 */
  @Event onPick: () => void = (): void => {
  };

  build() {
    Row({ space: 10 }) {
      if (this.dotColor !== '') {
        FbDot({ dia: 10, fillC: this.dotColor })
      }
      Column({ space: 2 }) {
        Text(this.label)
          .fontSize(FbMetric.fontSmall)
          .fontColor(this.active ? '#4A7C82' : FbColors.ink)
          .fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal)
          .maxLines(2)
        if (this.hint !== '') {
          Text(this.hint)
            .fontSize(FbMetric.fontTiny)
            .fontColor(FbColors.faint)
            .maxLines(2)
        }
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)

      Text(this.active ? '✓' : '')
        .fontSize(FbMetric.fontSmall)
        .fontColor('#4A7C82')
        .width(20)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .padding({ top: 10, bottom: 10, left: 12, right: 12 })
    .backgroundColor(this.active ? '#EAF2F2' : FbColors.inputBg)
    .borderRadius(FbMetric.radiusS)
    .margin({ bottom: 8 })
    .alignItems(VerticalAlign.Center)
    .onClick((): void => {
      this.onPick();
    })
  }
}