import { jsx as e, jsxs as o } from "react/jsx-runtime";
import { useDynamicImport as le } from "./index-use-dynamic-import.js";
import { mr3 as D, dFlexRow as W, dFlex as _, justifyContentBetween as re, w100 as se, alignItemsCenter as ae, mb1 as K, mr2 as H, cursorPointer as O, positionRelative as de } from "./index-general.module.js";
import { classNames as v } from "./index-classNames.js";
import S from "./index-Collapse2.js";
import R from "./index-Fade.js";
import { Button as C, ButtonSizes as g, ButtonTypes as y } from "./index-Button.js";
import { Icon as m, IconSize as $ } from "./index-Icon.js";
import { IconNames as l } from "./index-IconNames.js";
import { LottieAnimationLoader as me } from "./index-LottieAnimationLoader.js";
import { Render as N } from "./index-Render.js";
import { StyledSVG as V } from "./index-StyledSVG.js";
import { Text as i, TextTypes as q, FontWeights as he } from "./index-Text.js";
import { Textarea as J } from "./index-Textarea.js";
import { useState as z, useRef as Q, useCallback as ue, useEffect as pe } from "react";
import { createPortal as fe } from "react-dom";
import ve from "./index-ai-loader-loop.json.js";
import n from "./index-AIAssistantPanel.module.scss.js";
import U from "./index-Grow.js";
const Be = (k) => {
  const {
    id: h,
    value: M,
    setValue: X,
    className: T,
    status: c,
    setStatus: s,
    onGenerateClick: u,
    onAdjustClick: I,
    anchorElem: Y,
    needsCommandOnGenerate: Z,
    hasGenerateHashtagsAdjustOption: ee,
    // TODO: Those two props should be moved to forbiddenAjustOptions logic
    hasIncludeKeywordsAdjustOption: ne,
    // TODO: Those two props should be moved to forbiddenAjustOptions logic
    onKeepCallback: A,
    onCloseCallback: F,
    onTextareaMouseDown: j,
    forbiddenAjustOptions: a
  } = k, {
    SvgIcon: P
  } = le("rc/rc_logo_gray.svg"), [oe, p] = z(!1), [x, B] = z("generate"), [d, te] = z({}), w = Q(null), b = Q(null), E = ue((t) => {
    t.key === "Escape" && s && s("closed"), t.key === "Enter" && L();
  }, [M, x, c]);
  pe(() => (document.addEventListener("keydown", E, !1), () => {
    document.removeEventListener("keydown", E, !1);
  }), [E]);
  const r = (t) => {
    var G;
    if (t !== "changeTone" && (p(!1), I)) {
      const f = {
        value: M,
        option: t,
        command: (G = w.current) == null ? void 0 : G.value
      };
      I(f.value, f.option, f.command), te({
        value: f.value,
        option: f.option,
        command: f.command
      }), B("adjust"), w.current && (w.current.value = "");
    }
  }, L = () => {
    var t;
    c === "closed" || (c === "adjust" ? r("command") : c === "needsCommand" && (u && u((t = b.current) == null ? void 0 : t.value), B("generate")));
  }, ie = () => {
    var t;
    if (x === "generate") {
      if (Z) {
        u && u((t = b.current) == null ? void 0 : t.value);
        return;
      }
      u && u();
      return;
    }
    x === "adjust" && I && I(d == null ? void 0 : d.value, d == null ? void 0 : d.option, d == null ? void 0 : d.command);
  }, ce = () => {
    X(""), s && s("closed");
  };
  return e(Ne, {
    anchorElem: Y,
    children: e("div", {
      className: n.portal,
      id: `${h}_Panel`,
      "data-testid": `${h}_Panel`,
      style: {
        zIndex: 1100,
        transition: "all 0.05s ease-in-out"
      },
      children: e(U, {
        in: c !== "closed",
        timeout: 350,
        children: o("div", {
          className: n.topLine,
          children: [e("div", {
            children: e(R, {
              in: c === "writing",
              children: o("div", {
                className: v(n.container, n.menu, T),
                children: [e(V, {
                  width: "13",
                  height: "16",
                  src: P
                }), e("div", {
                  className: n.animation,
                  children: e(me, {
                    src: ve
                  })
                }), e(i, {
                  type: q.textCaption,
                  color: "--a1500",
                  className: D,
                  children: "writing"
                }), o("div", {
                  className: n.rightMenu,
                  children: [e(i, {
                    children: "Stop"
                  }), e(i, {
                    color: "--n400",
                    fontSize: 12,
                    fontWeight: he.medium,
                    children: "ESC"
                  })]
                })]
              })
            })
          }), e("div", {
            children: e(R, {
              in: c === "open" || c === "adjust" || c === "needsCommand",
              children: o("div", {
                className: v(n.container, T),
                children: [o("div", {
                  className: n.menu,
                  children: [o("div", {
                    className: v(_, W, ae, se, re),
                    children: [o("div", {
                      className: v(_, W),
                      children: [e(V, {
                        width: "13",
                        height: "16",
                        src: P
                      }), e(m, {
                        color: "--n400",
                        children: l.ai
                      }), e(i, {
                        type: q.textCaption,
                        color: "--n400",
                        className: D,
                        children: "Assistant"
                      })]
                    }), e("div", {
                      id: `${h}_ButtonClose`,
                      className: n.rightMenu,
                      children: e(C, {
                        className: n.x,
                        type: y.default,
                        size: g.small,
                        iconLeft: l.close,
                        iconColor: "--n500",
                        iconHoverColor: "--n700",
                        onClick: () => {
                          s && s("closed"), F && F();
                        }
                      })
                    })]
                  }), e(N, {
                    if: c === "open",
                    children: e(S, {
                      in: c === "open",
                      children: e(R, {
                        in: c === "open",
                        children: o("div", {
                          className: n.menu,
                          children: [e(C, {
                            size: g.small,
                            type: y.secondary,
                            iconLeft: l.check,
                            onClick: () => {
                              s && s("closed"), A && A();
                            },
                            children: "Keep"
                          }), e(C, {
                            size: g.small,
                            type: y.secondary,
                            iconLeft: l.audioSettings,
                            onClick: () => {
                              s && s("adjust");
                            },
                            children: "Adjust"
                          }), e(C, {
                            size: g.small,
                            type: y.secondary,
                            iconLeft: l.refresh,
                            onClick: ie,
                            children: "Try again"
                          }), e(C, {
                            size: g.small,
                            type: y.secondary,
                            iconLeft: l.trash,
                            onClick: ce
                          })]
                        })
                      })
                    })
                  })]
                }), e(S, {
                  in: c === "needsCommand",
                  children: e("div", {
                    className: n.adjustContainer,
                    children: e("div", {
                      onMouseDown: (t) => {
                        t.stopPropagation(), j && j();
                      },
                      children: e(J, {
                        autoFocus: !0,
                        inputRef: b,
                        placeholder: "Write commands to the Assistant",
                        className: K,
                        minRows: 1,
                        counter: !1,
                        maxLength: 255,
                        endAdornment: e(m, {
                          className: v(O, H),
                          onClick: () => L(),
                          color: "--n400",
                          type: $.large,
                          children: l.send
                        })
                      })
                    })
                  })
                }), e(S, {
                  in: c === "adjust",
                  children: o("div", {
                    className: n.adjustContainer,
                    children: [e("div", {
                      onMouseDown: (t) => {
                        t.stopPropagation(), j && j();
                      },
                      children: e(J, {
                        inputRef: w,
                        placeholder: "Write commands to the Assistant",
                        className: K,
                        minRows: 1,
                        counter: !1,
                        maxLength: 255,
                        endAdornment: e(m, {
                          className: v(O, H),
                          onClick: () => L(),
                          color: "--n400",
                          type: $.large,
                          children: l.send
                        })
                      })
                    }), e(N, {
                      if: !(a != null && a.includes("expand")),
                      children: e("button", {
                        className: n.adjustItem,
                        onMouseEnter: () => p(!1),
                        onClick: () => r("expand"),
                        children: o("div", {
                          className: n.content,
                          children: [e(m, {
                            color: "--n500",
                            children: l.maximize
                          }), e(i, {
                            color: "--n500",
                            children: "Expand"
                          })]
                        })
                      })
                    }), e(N, {
                      if: !(a != null && a.includes("shorten")),
                      children: e("button", {
                        className: n.adjustItem,
                        onMouseEnter: () => p(!1),
                        onClick: () => r("shorten"),
                        children: o("div", {
                          className: n.content,
                          children: [e(m, {
                            color: "--n500",
                            children: l.minimize
                          }), e(i, {
                            color: "--n500",
                            children: "Shorten"
                          })]
                        })
                      })
                    }), e(N, {
                      if: !(a != null && a.includes("expand")),
                      children: o("div", {
                        className: de,
                        children: [e("button", {
                          className: n.adjustItem,
                          onMouseEnter: () => p(!0),
                          onClick: () => r("changeTone"),
                          children: o("div", {
                            className: n.content,
                            children: [e(m, {
                              color: "--n500",
                              children: l.audioMicrophone
                            }), e(i, {
                              color: "--n500",
                              children: "Change tone"
                            }), e(m, {
                              color: "--n500",
                              className: n.rightIcon,
                              children: l.caretRight
                            })]
                          })
                        }), e(U, {
                          in: oe,
                          style: {
                            transformOrigin: "top right"
                          },
                          children: o("div", {
                            className: n.dropdown,
                            children: [e("button", {
                              className: n.adjustItem,
                              onClick: () => r("formal"),
                              children: e("div", {
                                className: n.content,
                                children: e(i, {
                                  color: "--n500",
                                  children: "Formal"
                                })
                              })
                            }), e("button", {
                              className: n.adjustItem,
                              onClick: () => r("professional"),
                              children: e("div", {
                                className: n.content,
                                children: e(i, {
                                  color: "--n500",
                                  children: "Professional"
                                })
                              })
                            }), e("button", {
                              className: n.adjustItem,
                              onClick: () => r("informative"),
                              children: e("div", {
                                className: n.content,
                                children: e(i, {
                                  color: "--n500",
                                  children: "Informative"
                                })
                              })
                            }), e("button", {
                              className: n.adjustItem,
                              onClick: () => r("friendly"),
                              children: e("div", {
                                className: n.content,
                                children: e(i, {
                                  color: "--n500",
                                  children: "Friendly"
                                })
                              })
                            }), e("button", {
                              className: n.adjustItem,
                              onClick: () => r("bold"),
                              children: e("div", {
                                className: n.content,
                                children: e(i, {
                                  color: "--n500",
                                  children: "Bold"
                                })
                              })
                            }), e("button", {
                              className: n.adjustItem,
                              onClick: () => r("witty"),
                              children: e("div", {
                                className: n.content,
                                children: e(i, {
                                  color: "--n500",
                                  children: "Witty"
                                })
                              })
                            })]
                          })
                        })]
                      })
                    }), e(N, {
                      if: ee,
                      children: e("button", {
                        className: n.adjustItem,
                        onMouseEnter: () => p(!1),
                        onClick: () => r("generateHashtags"),
                        children: o("div", {
                          className: n.content,
                          children: [e(m, {
                            color: "--n500",
                            children: l.document
                          }), e(i, {
                            color: "--n500",
                            children: "Generate hashtags "
                          })]
                        })
                      })
                    }), e(N, {
                      if: ne,
                      children: e("button", {
                        className: n.adjustItem,
                        onMouseEnter: () => p(!1),
                        onClick: () => r("includeKeywords"),
                        children: o("div", {
                          className: n.content,
                          children: [e(m, {
                            color: "--n500",
                            children: l.document
                          }), e(i, {
                            color: "--n500",
                            children: "Integrate keywords"
                          })]
                        })
                      })
                    })]
                  })
                })]
              })
            })
          })]
        })
      })
    })
  });
}, Ne = ({
  children: k,
  anchorElem: h
}) => h ? fe(k, h ?? document.body) : k;
export {
  Be as AIAssistantPanel
};
