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

interface IAssingUserToDemoOrganizationModalProps {
  isOpen: boolean;
  onClose: () => void;
  organization: IDemoOrganizations;
}
export const AssingUserToDemoOrganizationModal: FC<
  IAssingUserToDemoOrganizationModalProps
> = ({ isOpen, onClose, organization }) => {
  const { uid, lang } = useStoreState((state) => state.user.userDetails);
  const demoUsers = useStoreState((state) => state.demo.users);
  const assignDemoUser = useStoreActions(
    (actions) => actions.demo.assignDemoUser,
  );
  const [user, setUser] = useState<Record<string, string>>({
    userID: "",
  });

  const ifFree = organization?.status === "free";

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

  const userScope = [
    { value: "", label: t(dictionary.selectUser) },
    ...demoUsers
      .filter((user) => user.status?.trim().toLowerCase() === "request")
      .map((user) => ({
        value: user.id || user.email,
        label: user.email,
      })),
  ];

  const assignUserForm = {
    action: updateForm,
    data: [
      {
        label: t(dictionary.email),
        field: "userID",
        type: "select",
        value: user.userID,
        options: userScope,
        name: "userID",
        zIndex: 1100,
      },
    ],
  };

  const validationOrg = () => !user.userID;

  const [loading, setLoading] = useState(false);

  const handleSendInvitation = async () => {
    if (!ifFree || !organization.orgID || !user.userID || loading) {
      return;
    }

    const selectedUser = demoUsers.find(
      (demoUser) => demoUser.id === user.userID || demoUser.email === user.userID,
    );

    if (!selectedUser) {
      return;
    }

    const invitationDate = Date.now();
    setLoading(true);

    try {
      await apiCall(
        "demoManagment/inviteUserToDemoOrganization",
        {
          uid,
          orgID: organization.orgID,
          userID: user.userID,
          email: selectedUser.email,
          lang: selectedUser.lang || lang,
        },
        () => {
          assignDemoUser({
            orgID: organization.orgID,
            userID: user.userID,
            invitationDate,
          });
          setUser({ userID: "" });
          onClose();
        },
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      {isOpen && (
        <Modal
          title={`${t(dictionary.addUserToDemoOrgTitle)}`}
          handleClose={onClose}
          handleConfirm={() => handleSendInvitation()}
          submitDisabled={validationOrg() || loading}
          submitLoader={loading}
          isOpen={isOpen}
          exitOnEsc={true}
          headerDivader={true}
          labels={{
            primary: ifFree ? t(dictionary.send) : undefined,
            secondary: ifFree ? t(dictionary.cancel) : t(dictionary.close),
          }}
        >
          {ifFree ? (
            <Form formData={assignUserForm} />
          ) : (
            <>
              <Text>{t(dictionary.organizationNotFree)}</Text>
            </>
          )}
        </Modal>
      )}
    </>
  );
};