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

interface IAssingOrganizationForDemoUserModalProps {
  isOpen: boolean;
  onClose: () => void;
  user: IUserDemoDetails;
}
export const AssingOrganizationForDemoUserModal: FC<
  IAssingOrganizationForDemoUserModalProps
> = ({ isOpen, onClose, user }) => {
  const { uid, lang } = useStoreState((state) => state.user.userDetails);
  const assignDemoUser = useStoreActions(
    (actions) => actions.demo.assignDemoUser,
  );
  const [loading, setLoading] = useState(false);
  const [organization, setOrganization] = useState<Record<string, string>>({
    orgID: "",
  });

  const ifFree = user?.status === "request";

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

    const userID = user.id || user.email;
    const invitationDate = Date.now();
    setLoading(true);

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

    
  const updateForm = (field: string, value: string) => {
    setOrganization((previousOrg) => ({ ...previousOrg, [field]: value }));
  };
  const validationUser = () => !organization.orgID;

  const organizations = useStoreState((state) => state.demo.organizations);

  const organizationScope = [
    { value: "", label: t(dictionary.selectOrganization) },
    ...organizations
      .filter((org) => org.status?.trim().toLowerCase() === "free")
      .map((org) => ({
        value: org.orgID,
        label: org.orgName || org.orgID,
      })),
  ];

  const assignUserForm = {
    action: updateForm,
    data: [
      {
        label: t(dictionary.name),
        field: "orgID",
        type: "select",
        value: organization.orgID,
        options: organizationScope,
        name: "orgID",
        zIndex: 1100,
      },
    ],
  };
  return (
    <>
      {isOpen && (
        <Modal
          title={`${t(dictionary.addOrgToDemoUserTitle)}`}
          handleClose={onClose}
          handleConfirm={() => handleSendInvitation()}
          submitDisabled={validationUser() || 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.userNotFree)}</Text>
            </>
          )}
        </Modal>
      )}
    </>
  );
};