'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { getPreviewContentId } from './Markdown.funcs.js';
import { Icon, iconNames } from '../icon/Icon.js';
import { LabelAnimation } from '../animation/LabelAnimation.js';
import { cva } from 'class-variance-authority';
import { parseMarkdown } from './markdown-parser.js';
import { markdownSuffixes } from '../../../fd-toolbox/constants/element-suffixes.js';
import { onTextFieldBlur } from '../form/form-field-focus.js';
import _0x5ca88f from 'lodash.debounce';
import { componentVariantNames } from '../../../fd-toolbox/constants/html-constants.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const markdownVariants = cva("relative z-0 border-b", {
  variants: {
    variant: {
      bordered: "",
      float: "border-background focus-within:border-fd-accent hover:border-fd-accent transition-colors"
    }
  },
  defaultVariants: {
    variant: componentVariantNames.float
  }
});
function Markdown(t0) {
  const $ = c(28);
  const {
    id,
    label,
    showContentPreview,
    value,
    disabled,
    readOnly,
    skipAnimationOnce,
    variant,
    onChange,
    onBlur,
    error,
    required
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = [];
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const [previewContent, setPreviewContent] = useState(t1);
  const [isPreview, setIsPreview] = useState(showContentPreview ?? false);
  const [isInFocus, setIsInFocus] = useState(false);
  let t2;
  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = _0x5ca88f(async val => {
      const result = await parseMarkdown(val);
      setPreviewContent(result);
    }, 500);
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  const debouncedParseMarkdown = t2;
  let t3;
  let t4;
  if ($[2] !== value) {
    t3 = () => {
      if (value) {
        debouncedParseMarkdown(value);
      }
    };
    t4 = [value, debouncedParseMarkdown];
    $[2] = value;
    $[3] = t3;
    $[4] = t4;
  } else {
    t3 = $[3];
    t4 = $[4];
  }
  useEffect(t3, t4);
  let t5;
  let t6;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = () => () => {
      debouncedParseMarkdown.cancel();
    };
    t6 = [debouncedParseMarkdown];
    $[5] = t5;
    $[6] = t6;
  } else {
    t5 = $[5];
    t6 = $[6];
  }
  useEffect(t5, t6);
  let t7;
  if ($[7] !== disabled || $[8] !== error || $[9] !== id || $[10] !== isInFocus || $[11] !== isPreview || $[12] !== label || $[13] !== onBlur || $[14] !== onChange || $[15] !== previewContent || $[16] !== readOnly || $[17] !== required || $[18] !== skipAnimationOnce || $[19] !== value || $[20] !== variant) {
    let t8;
    if ($[22] !== onChange) {
      t8 = e => onChange?.(e.target.value);
      $[22] = onChange;
      $[23] = t8;
    } else {
      t8 = $[23];
    }
    let t9;
    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
      t9 = () => setIsInFocus(true);
      $[24] = t9;
    } else {
      t9 = $[24];
    }
    let t10;
    if ($[25] !== onBlur) {
      t10 = e_0 => onTextFieldBlur(e_0, setIsInFocus, onBlur);
      $[25] = onBlur;
      $[26] = t10;
    } else {
      t10 = $[26];
    }
    let t11;
    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
      t11 = () => setIsPreview(_temp);
      $[27] = t11;
    } else {
      t11 = $[27];
    }
    t7 = jsxs("div", {
      children: [isPreview && jsxs(Fragment, {
        children: [jsxs("p", {
          className: "mb-2",
          children: [label, " Preview:"]
        }), jsx("div", {
          className: "mb-5 w-full overflow-auto",
          children: jsx("div", {
            id: getPreviewContentId(id),
            children: previewContent
          })
        })]
      }), jsxs("div", {
        className: cn(markdownVariants({
          variant
        })),
        children: [jsx("textarea", {
          id,
          rows: 5,
          placeholder: "",
          required,
          disabled,
          readOnly,
          value,
          onChange: t8,
          onFocus: t9,
          onBlur: t10,
          className: cn("text-muted-foreground peer block w-full appearance-none border-0 bg-transparent px-0 py-2.5 text-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed", disabled || readOnly ? "resize-none" : "")
        }), jsx(LabelAnimation, {
          label,
          shouldAnimate: !!value || isInFocus,
          skipAnimationOnce,
          className: cn("top-4 left-0 max-w-full truncate px-0 transition-transform", variant === "bordered" ? (!!value || isInFocus) && "!-translate-y-6" : "top-2"),
          variant: variant ?? componentVariantNames.float
        }), jsx("div", {
          className: "absolute top-2 right-0",
          onClick: t11,
          children: jsx(Icon, {
            id: id + markdownSuffixes.previewIcon,
            name: isPreview ? iconNames.visibility : iconNames.visibilityOff
          })
        }), jsx("div", {
          className: cn("w-full pt-2", error && "border-destructive focus:border-destructive")
        })]
      })]
    });
    $[7] = disabled;
    $[8] = error;
    $[9] = id;
    $[10] = isInFocus;
    $[11] = isPreview;
    $[12] = label;
    $[13] = onBlur;
    $[14] = onChange;
    $[15] = previewContent;
    $[16] = readOnly;
    $[17] = required;
    $[18] = skipAnimationOnce;
    $[19] = value;
    $[20] = variant;
    $[21] = t7;
  } else {
    t7 = $[21];
  }
  return t7;
}
function _temp(prev) {
  return !prev;
}
__name(Markdown, "Markdown");

export { Markdown, markdownVariants };
