import { Form, Space } from "antd";
import { useTranslation } from "react-i18next";
import AlertComponent from "../alert/alert.component";
import "./form-fields-changed.styles.scss";
import Prompt from "../../utils/prompt";

export default function FormsFieldChanged({ form, skipPrompt }) {
  const { t } = useTranslation();

  const handleReset = () => {
    form.resetFields();
  };
  //if (!form.isFieldsTouched()) return <></>;
  return (
    <Form.Item className="form-fields-changed" shouldUpdate style={{ margin: 0, padding: 0, minHeight: "unset" }}>
      {() => {
        const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
        if (form.isFieldsTouched())
          return (
            <Space orientation="vertical" style={{ width: "100%" }}>
              <Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
              <AlertComponent
                type="warning"
                title={
                  <div>
                    <span>{t("general.messages.unsavedchanges")} </span>
                    <span
                      onClick={handleReset}
                      style={{
                        cursor: "pointer",
                        textDecoration: "underline"
                      }}
                    >
                      {t("general.actions.reset")}
                    </span>
                  </div>
                }
              />
              {errors.length > 0 && (
                <AlertComponent
                  type="error"
                  message={t("general.labels.validationerror")}
                  description={
                    <div>
                      <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
                    </div>
                  }
                  showIcon
                />
              )}
            </Space>
          );
        return <div style={{ display: "none" }}></div>;
      }}
    </Form.Item>
  );
}