import React, { FC, useEffect, useState } from "react";
import { dictionary } from "../../untils/dictionary";
import {
  isWeldingAppDomain,
  sendInvitationVerfication,
  t,
} from "../../helpers/userHelper";
import { Checkbox, Form, Modal } from "venice-ui";
import {
  memeberRoleScope,
} from "../../definitions/organizations";
import { apiCall } from "../../untils/apiCall";
import { useStoreActions, useStoreState } from "../../store";
import { getMemberDetails } from "../../helpers/organizationHelper";
import { ErrorArea } from "../SingIn/Login.styles";
import { emailFormatCheck } from "../PasswordCheck/checks";
import { DEMO_MODE } from "../../untils/const";

interface IUserModal {
  handleClose: () => void;
  memberID?: string;
  isOpen: boolean;
}
export const UserModal: FC<IUserModal> = ({
  handleClose,
  memberID,
  isOpen,
}) => {
  const { orgID, lang, email } = useStoreState(
    (state) => state.user.userDetails,
  );
  const { members, invitations, contracts } = useStoreState(
    (state) => state.organization,
  );
  const [loadAction, setLoadAction] = useState(false);
  const [userDetails, setUserDetails] = useState({
    email: "",
    role: "admin",
    demoUser: false,
  });
  const [error, setError] = useState({
    show: false,
    msg: "",
  });

  const { saveMemberRole, addInvitation } = useStoreActions(
    (actions) => actions.organization,
  );

  useEffect(() => {
    if (memberID) {
      const details = getMemberDetails(members, memberID, contracts);

      setUserDetails({
        email: details.email,
        role: details.role,
        demoUser: false,
      });
    }
  }, [memberID]);

  const updateForm = (field: string, value: string | boolean) => {
    setError({
      show: false,
      msg: "",
    });
    setUserDetails({
      ...userDetails,
      [field]: value,
    });
  };
  const sendInvatation = async () => {
    setLoadAction(true);
    setError({
      show: false,
      msg: "",
    });

    const isValid = sendInvitationVerfication(
      userDetails.email,
      invitations,
      members,
    );
    if (isValid) {
      const options = {
        email: userDetails.email,
        role: userDetails.role,
        orgID: orgID,
        date: Date.now(),
        lang: lang,
        firstDemoUser: userDetails.demoUser,
      };
      await apiCall("organization/sendInvitation", options, (response: any) => {
        if (response.success) {
          addInvitation({
            id: response.invitationID,
            orgID: orgID,
            date: options.date,
            role: userDetails.role,
            user: userDetails.email,
          });
          setLoadAction(false);
          handleClose();
        } else {
          setError({
            show: true,
            msg: response.errorMsg,
          });
          setLoadAction(false);
        }
      });
    } else {
      const msg = !emailFormatCheck(userDetails.email)
        ? t(dictionary.wrongEmail)
        : t(dictionary.alreadyInvitation);
      setError({
        show: true,
        msg: msg,
      });
      setLoadAction(false);
    }
  };

  const saveMember = async () => {
    const options = {
      memberID: memberID,
      role: userDetails.role,
      orgID: orgID,
    };
    await apiCall(
      "organization/saveMemberDetails",
      options,
      (response: any) => {
        saveMemberRole({ memberID: memberID || "", role: userDetails.role });
        handleClose();
      },
    );
  };

  const submitAction = () => {
    if (memberID) {
      saveMember();
    } else {
      sendInvatation();
    }
  };
  const userForm = {
    action: updateForm,
    data: [
      {
        type: "text",
        label: t(dictionary.email),
        value: userDetails?.email,
        name: "email",
        autofocus: true,
        submit: () => submitAction(),
        isDisabled: !!memberID,
      },
      {
        type: "select",
        label: t(dictionary.role),
        value: userDetails.role,
        options: memeberRoleScope,
        zIndex: 1001,
        position: "left",
        name: "role",
      },
    ],
  };

  return (
    <Modal
      title={memberID ? t(dictionary.editUser) : t(dictionary.addUser)}
      handleClose={handleClose}
      handleConfirm={submitAction}
      submitDisabled={userDetails.email.length === 0}
      headerDivader={true}
      size="sm"
      submitLoader={loadAction}
      isOpen={isOpen}
      exitOnEsc={true}
      labels={{
        primary: t(dictionary.add),
        secondary: t(dictionary.close),
      }}
    >
      <Form formData={userForm} />
      {DEMO_MODE && isWeldingAppDomain(email) && (
        <Checkbox
          size="sm"
          label={t(dictionary.demoUser)}
          value={userDetails.demoUser}
          handleClick={(value: boolean) => updateForm("demoUser", value)}
          labelPosition="left"
          labelInversed={true}

        />
      )}
      {error.show && <ErrorArea>{t(dictionary.usedEmailAdress)}</ErrorArea>}
    </Modal>
  );
};