/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {ChangeEvent, useRef, FC} from 'react';
import text from './text';

import {LoginFormBackground as Layout, LoginButton, LoginHeader, LoginText, LoginLink, ErrorText} from './style';

import {LoadingWheel} from 'components/loaders';

interface ILoginContainer {
  onSubmit: () => void;
  ignoredOnChange: (event: ChangeEvent<HTMLInputElement>) => void;
  errorMessage: string;
  isLoading?: boolean;
  isWebsocketConnected?: boolean;
}

export const Login: FC<ILoginContainer> = (props: ILoginContainer) => {
  const {headerText, headerTextSmall, signInText, loginForgottenText} = text;
  const {ignoredOnChange: _ignoredOnChange, onSubmit, errorMessage, isLoading, isWebsocketConnected} = props;
  const _ignoredApplicationIdRef = useRef(null);
  const _ignoredSecretRef = useRef(null);
  const _ignoredHandleKeySubmit = ({key}: {key: string}) => {
    if (key !== 'Enter') {
      return;
    }

    onSubmit();
  };

  return (
    <Layout>
      <LoginHeader>{headerText}</LoginHeader>
      <LoginText>{headerTextSmall}</LoginText>
      {/* <InputWithRef
        imagePath={personImage}
        imageAltText="Application Id"
        onChange={onChange}
        onKeyPress={handleKeySubmit}
        name="applicationId"
        type="text"
        ref={applicationIdRef}
        disabled={isLoading}
        autocomplete="off"
      />
      <InputWithRef
        imagePath={lockImage}
        imageAltText="Secret"
        onChange={onChange}
        onKeyPress={handleKeySubmit}
        ref={secretRef}
        name="secret"
        type="password"
        disabled={isLoading}
        autocomplete="new-password"
      /> */}
      <ErrorText className="error-message testId-displayMessage">{errorMessage || null}</ErrorText>
      <LoginButton onClick={onSubmit} disabled={isLoading || !isWebsocketConnected} className="testId-loginButton">
        {(!isWebsocketConnected || isLoading) && (
          <span>
            <LoadingWheel size={'small'} />
          </span>
        )}
        {isWebsocketConnected && signInText}
      </LoginButton>
      <LoginLink>{loginForgottenText}</LoginLink>
    </Layout>
  );
};
