import React, { useState } from "react";
import "./filterInfo-styles.scss";
import { FilterInfoProps } from "@app/models/components";
import InputField from "../input-field/InputField";
import TextArea from "../textArea/TextArea";
import { Oval } from "react-loader-spinner";
import Tooltip from "../Tooltip/Tooltip";

import Button from "../button/Button";
import { cancelBox, checkBox } from "@app/assets/images/icons";

const FilterInfo: React.FC<FilterInfoProps> = ({
  fields,
  onSave,
  onChange,
  isLoading,
  onCancel,
  isDefaultDescription,
  isEditing,
  setIsEditing,
}) => {
  const [focusedField, setFocusedField] = useState<string | null>(null);
  const [isUpdated, setIsUpdated] = useState(false);
  const [isClickingButton, setIsClickingButton] = useState(false);

  const removeFocus = () => {
    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }
  };

  const handleCancel = () => {
    setIsClickingButton(false);
    onCancel?.();
    setFocusedField(null);
    removeFocus();
    setIsUpdated(true);
    setIsEditing?.(false);
  };

  return (
    <div className="filterInfo-Container">
      <div className="filterInfo-inputWrapper">
        {fields.map((field) => (
          <div key={field.name}>
            {field.type === "paragraph" ? (
              <>
                {" "}
                <TextArea
                  field={field}
                  onChange={onChange}
                  onSave={onSave}
                  onFocus={() => {
                    !isLoading && setFocusedField(field.name);
                  }}
                  isUpdated={isUpdated}
                  setIsUpdated={setIsUpdated}
                  isEditing={isEditing}
                  setIsEditing={setIsEditing}
                  isLoading={isLoading}
                  isDefaultDescription={isDefaultDescription}
                />
                {isEditing && !isLoading && (
                  <div className="filterInfo-buttonsContainer">
                    <Button
                      icon={cancelBox}
                      onMouseDownHandler={(e) => e.preventDefault()}
                      onClickHandler={handleCancel}
                      shape="boxy"
                      variant="ghost"
                      collapse
                    />
                    <Button
                      icon={checkBox}
                      onMouseDownHandler={(e) => e.preventDefault()}
                      onClickHandler={() => {
                        onSave?.();
                        setFocusedField(null);
                        removeFocus();
                        setIsUpdated(true);
                        setIsEditing?.(false);
                      }}
                      shape="boxy"
                      variant="ghost"
                      collapse
                    />
                  </div>
                )}
              </>
            ) : (
              <div
                className={
                  field?.variant === "primary"
                    ? "filterInfo-title-container"
                    : "filterInfo-slug-container"
                }
              >
                <InputField
                  containerID={
                    field?.variant === "primary"
                      ? `filterInfoTitle-input${isLoading ? "-loading" : ""}`
                      : `filterInfo-input${isLoading ? "-loading" : ""}`
                  }
                  type="text"
                  name={field.name}
                  value={field.value}
                  onChange={(name, value) => onChange?.(name, value)}
                  concatenatedString={field.concatenatedValue}
                  onBlur={() => {
                    // Only trigger onSave if we're not clicking a button
                    if (!isClickingButton) {
                      setFocusedField(null);
                      onSave?.();
                    }
                  }}
                  onFocus={() => {
                    !isLoading && setFocusedField(field.name);
                  }}
                />
                {focusedField == field.name && !isLoading && (
                  <div className="filterInfo-buttonsContainer">
                    <Button
                      icon={cancelBox}
                      onMouseDownHandler={(e) => {
                        e.preventDefault();
                        setIsClickingButton(true);
                      }}
                      onClickHandler={handleCancel}
                      shape="boxy"
                      variant="ghost"
                      collapse
                    />
                    <Button
                      icon={checkBox}
                      onMouseDownHandler={(e) => {
                        e.preventDefault();
                        setIsClickingButton(true);
                      }}
                      onClickHandler={() => {
                        setIsClickingButton(false);
                        onSave?.();
                        setFocusedField(null);
                        removeFocus();
                      }}
                      shape="boxy"
                      variant="ghost"
                      collapse
                    />
                  </div>
                )}
                {field?.variant == "secondary" && isLoading && (
                  <div className="filterInfo-loadingButton">
                    <Oval
                      height={26}
                      width={26}
                      color="#8134af"
                      wrapperStyle={{}}
                      wrapperClass=""
                      visible={true}
                      ariaLabel="oval-loading"
                      secondaryColor="#8134af"
                      strokeWidth={6}
                      strokeWidthSecondary={6}
                    />
                  </div>
                )}
                {field.link &&
                  !field.slugHasChanged &&
                  !field.langHasChanged &&
                  !isLoading &&
                  !focusedField && (
                    <div className="filterInfo-linkButton">
                      <Tooltip text="open Link in a new page">
                        <Button
                          id="filterInfo-OpenPageButton"
                          variant="secondary"
                          onClickHandler={() => {
                            window.open(field.link, "_blank");
                          }}
                          icon={field.icon}
                          shape="boxy"
                          size="lg"
                        />
                      </Tooltip>
                    </div>
                  )}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default FilterInfo;