import { FC, useState } from "react";
import { Modal, Form } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { useStoreActions, useStoreState } from "../../store";
import { apiCall } from "../../untils/apiCall";
import { IDemoOrganizations } from "../../store/interface/demo";

interface IAddOrgModalProps {
  onClose: () => void;
  isOpen: boolean;
}

export const AddOrgModal: FC<IAddOrgModalProps> = ({ onClose, isOpen }) => {
  const { uid, lang } = useStoreState((state) => state.user.userDetails);
  const [org, setOrg] = useState<Record<string, string | number>>({ name: "" });
  const [loading, setLoading] = useState(false);

  const addDemoOrganization = useStoreActions(
    (actions) => actions.demo.addDemoOrganization,
  );

  const updateForm = (field: string, value: string) => {
    setOrg((previousOrg) => ({ ...previousOrg, [field]: value }));
  };

  const handleConfirm = async () => {
    if (validationOrg() || loading) {
      return;
    }

    setLoading(true);
    try {
      const options = {
        name: org.name,
        uid,
        lang,
      };
      await apiCall(
        "demoManagment/createDemoOrganization",
        options,
        (response: any) => {
          const organization = (response.newOrg ||
            response) as IDemoOrganizations;

          addDemoOrganization(organization);
          setOrg({ name: "" });
          onClose();
        },
      );
    } finally {
      setLoading(false);
    }
  };
  const validationOrg = () => {
    const name = org.name as string;
    return name.trim().length === 0;
  };

  const addForm = {
    action: updateForm,
    data: [
      {
        label: t(dictionary.name),
        field: "name",
        type: "text",
        suffix: "@weldingapp.io",
        name: "name",
      },
    ],
  };

  return (
    <>
      {isOpen && (
        <Modal
          title={`${t(dictionary.addOrg)}`}
          handleClose={onClose}
          handleConfirm={() => handleConfirm()}
          submitDisabled={validationOrg() || loading}
          submitLoader={loading}
          isOpen={isOpen}
          exitOnEsc={true}
          headerDivader={true}
          labels={{
            primary: t(dictionary.save),
            secondary: t(dictionary.cancel),
          }}
        >
          <Form formData={addForm} />
        </Modal>
      )}
    </>
  );
};