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

import {InputWithRef} from 'components/inputs';
import Theme  from 'theme';

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

import personImage from 'assets/images/symbol-person-24x24.png';
import lockImage from 'assets/images/symbol-lock-24x24.png';
import { LoadingWheel } from 'components/loaders';

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

export const Login: FC<ILoginContainer> = (props: ILoginContainer) => {
  const {headerText, headerTextSmall, signInText, loginForgottenText} = text;
  const {onChange, onSubmit, errorMessage, isLoading, isWebsocketConnected} = props;
  const applicationIdRef = useRef(null);
  const secretRef = useRef(null);
  const handleKeySubmit = ({key}) => {
    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
        backgroundColor={Theme.colors.red}
        onClick={onSubmit}
        disabled={isLoading || !isWebsocketConnected}
        className="testId-loginButton"
      >
        {(!isWebsocketConnected || isLoading) && <span><LoadingWheel size={'small'} /></span>}
        {isWebsocketConnected && signInText}
      </LoginButton>
      <LoginLink>
        {loginForgottenText}
      </LoginLink>
    </Layout>
  );
};