import { signal, useProps } from "@odoo/owl";
import { HIGHLIGHT_COLOR, TEXT_BODY } from "../../../../constants";
import { colorNumberToHex } from "../../../../helpers/color";
import { Component } from "../../../../owl3_compatibility_layer";
import { criterionEvaluatorRegistry } from "../../../../registries/criterion_registry";
import { Highlight } from "../../../../types/misc";
import { SpreadsheetChildEnv } from "../../../../types/spreadsheet_env";
import { cellStyleToCss, cssPropertiesToCss } from "../../../helpers/css";
import { useHighlightsOnHover } from "../../../helpers/highlight_hook";
import { ICONS } from "../../../icons/icons";
import { types } from "../../../props_validation";
import { CfTerms } from "../../../translations_terms";

export class ConditionalFormatPreview extends Component<SpreadsheetChildEnv> {
  static template = "o-spreadsheet-ConditionalFormatPreview";
  protected props = useProps({
    conditionalFormat: types.ConditionalFormat(),
    onMouseDown: types.function<(ev: MouseEvent) => void>(),
    class: types.string(),
  });

  icons = ICONS;
  private cfPreviewRef = signal.ref();

  setup() {
    useHighlightsOnHover(this.cfPreviewRef, this);
  }

  get previewImageStyle(): string {
    const rule = this.props.conditionalFormat.rule;
    if (rule.type === "CellIsRule") {
      return cssPropertiesToCss(cellStyleToCss(rule.style));
    } else if (rule.type === "ColorScaleRule") {
      const minColor = colorNumberToHex(rule.minimum.color);
      const midColor = rule.midpoint ? colorNumberToHex(rule.midpoint.color) : null;
      const maxColor = colorNumberToHex(rule.maximum.color);
      const baseString = "background-image: linear-gradient(to right, ";
      return midColor
        ? baseString + minColor + ", " + midColor + ", " + maxColor + ")"
        : baseString + minColor + ", " + maxColor + ")";
    } else if (rule.type === "DataBarRule") {
      const barColor = colorNumberToHex(rule.color);
      const gradient = `background-image: linear-gradient(to right, ${barColor} 50%, white 50%)`;
      return `${gradient}; color: ${TEXT_BODY};`;
    }
    return "";
  }

  get description(): string {
    const cf = this.props.conditionalFormat;
    switch (cf.rule.type) {
      case "CellIsRule":
        return criterionEvaluatorRegistry
          .get(cf.rule.operator)
          .getPreview({ ...cf.rule, type: cf.rule.operator }, this.env.model.getters);
      case "ColorScaleRule":
        return CfTerms.ColorScale;
      case "IconSetRule":
        return CfTerms.IconSet;
      case "DataBarRule":
        return CfTerms.DataBar;
    }
  }

  get highlights(): Highlight[] {
    const sheetId = this.env.model.getters.getActiveSheetId();
    return this.props.conditionalFormat.ranges.map((range) => ({
      range: this.env.model.getters.getRangeFromSheetXC(sheetId, range),
      color: HIGHLIGHT_COLOR,
      fillAlpha: 0.06,
    }));
  }

  editConditionalFormat() {
    this.env.replaceSidePanel("ConditionalFormattingEditor", "ConditionalFormatting", {
      cf: this.props.conditionalFormat,
      isNewCf: false,
    });
  }

  deleteConditionalFormat() {
    this.env.model.dispatch("REMOVE_CONDITIONAL_FORMAT", {
      id: this.props.conditionalFormat.id,
      sheetId: this.env.model.getters.getActiveSheetId(),
    });
  }
}