import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { ensureArray } from '../../internal/ensure-array.mjs';
import { isFunction, isDefined } from '../../internal/type-checks.mjs';

function getDefault(defaultVal, fallback) {
  if (isFunction(defaultVal)) {
    return defaultVal();
  }
  return isDefined(defaultVal) ? defaultVal : fallback;
}
const defaultStringTemplate = (rule, field, qb, update) => {
  const handleChange = (ev) => {
    const target = ev.target;
    rule.value = target.value === "" ? void 0 : target.value;
    target.setCustomValidity?.(field.validator?.(rule) ?? "");
    update();
  };
  return html`
    <flow-ui-input
      filled
      class="query-builder__rule-value-control"
      value=${rule.value ?? ""}
      size=${qb.size}
      ?disabled=${!rule.enabled}
      @flow-ui-change=${handleChange}
    ></flow-ui-input>
  `;
};
const defaultNumberTemplate = (rule, field, qb, update) => {
  const handleChange = (ev) => {
    const target = ev.target;
    rule.value = target.value === "" ? void 0 : +target.value;
    target.setCustomValidity?.(field.validator?.(rule) ?? "");
    update();
  };
  return html`
    <flow-ui-input
      filled
      class="query-builder__rule-value-control"
      type="number"
      value=${rule.value ?? ""}
      size=${qb.size}
      min=${ifDefined(field.min)}
      max=${ifDefined(field.max)}
      step=${ifDefined(field.step)}
      ?disabled=${!rule.enabled}
      @flow-ui-change=${handleChange}
    ></flow-ui-input>
  `;
};
const defaultDateTimeTemplate = (rule, field, qb, update) => {
  const handleChange = (ev) => {
    const target = ev.target;
    rule.value = target.value === "" ? void 0 : target.value;
    target.setCustomValidity(field.validator?.(rule) ?? "");
    update();
  };
  const format = getDefault(field.dateFormat, "F");
  const timezone = getDefault(field.timezone);
  const locale = getDefault(field.locale);
  return html`
    <flow-ui-date-time-picker
      filled
      class="query-builder__rule-value-control"
      value=${rule.value ?? ""}
      size=${qb.size}
      placeholder="Enter a date/time"
      format=${ifDefined(format)}
      timezone=${ifDefined(timezone)}
      locale=${ifDefined(locale)}
      ?disabled=${!rule.enabled}
      @flow-ui-change=${handleChange}
    ></flow-ui-date-time-picker>
  `;
};
const defaultDateTemplate = (rule, field, qb, update) => {
  const handleChange = (ev) => {
    const target = ev.target;
    rule.value = target.value === "" ? void 0 : target.value;
    target.setCustomValidity(field.validator?.(rule) ?? "");
    update();
  };
  const format = getDefault(field.dateFormat, "D");
  const timezone = getDefault(field.timezone);
  const locale = getDefault(field.locale);
  return html`
    <flow-ui-date-time-picker
      filled
      class="query-builder__rule-value-control"
      value=${rule.value ?? ""}
      display-mode="date"
      size=${qb.size}
      placeholder="Enter a date"
      format=${ifDefined(format)}
      timezone=${ifDefined(timezone)}
      locale=${ifDefined(locale)}
      ?disabled=${!rule.enabled}
      @flow-ui-change=${handleChange}
    ></flow-ui-date-time-picker>
  `;
};
const defaultTimeTemplate = (rule, field, qb, update) => {
  const handleChange = (ev) => {
    const target = ev.target;
    rule.value = target.value === "" ? void 0 : target.value;
    target.setCustomValidity(field.validator?.(rule) ?? "");
    update();
  };
  const format = getDefault(field.dateFormat, "TTT");
  const timezone = getDefault(field.timezone);
  const locale = getDefault(field.locale);
  return html`
    <flow-ui-date-time-picker
      filled
      class="query-builder__rule-value-control"
      value=${rule.value ?? ""}
      display-mode="time"
      size=${qb.size}
      placeholder="Enter a time"
      format=${ifDefined(format)}
      timezone=${ifDefined(timezone)}
      locale=${ifDefined(locale)}
      ?disabled=${!rule.enabled}
      @flow-ui-change=${handleChange}
    ></flow-ui-date-time-picker>
  `;
};
const defaultSelectTemplate = (rule, field, qb, update) => {
  const isMulti = rule.operator === "in" || rule.operator === "!in";
  const handleChange = (ev) => {
    const target = ev.target;
    rule.value = target.value;
    target.setCustomValidity(field.validator?.(rule) ?? "");
    update();
  };
  return html`
    <flow-ui-select
      filled
      class="query-builder__rule-value-control"
      .value=${ensureArray(rule.value ?? "")}
      size=${qb.size}
      ?multiple=${isMulti}
      hoist
      ?disabled=${!rule.enabled}
      @flow-ui-change=${handleChange}
    >
      ${field.options?.map((option) => {
    return html`
          <flow-ui-option value=${option.value}>${option.name}</flow-ui-option>
        `;
  })}
    </flow-ui-select>
  `;
};

export { defaultDateTemplate, defaultDateTimeTemplate, defaultNumberTemplate, defaultSelectTemplate, defaultStringTemplate, defaultTimeTemplate };
