import { T9n } from 'features/T9n'
import { RecoveryPopup } from 'features/AuthServiceApp/components/RecoveryPopup'
import { client } from 'features/AuthServiceApp/config/clients'

import { PAGES } from '../../config/pages'
import { AuthProviders } from '../../config/authProviders'
import { LanguageSelect } from '../LanguageSelect'
import { PasswordInput } from '../PasswordInput'
import { Input } from '../../../../components/Input'
import { Logo } from '../Logo'
import { useLoginForm } from './hooks'

import {
  RegisterButton,
  AuthButtonsContainer,
  AuthButton,
  AuthButtonText,
  AuthButtonImage,
  ContinueWith,
} from './styled'

import {
  InputGroup,
  BlockTitle,
  CenterBlock,
  Container,
  ButtonsBlock,
  ForgotPass,
  Form,
  ButtonSolid,
  Error,
  LanguageSelectWrapper,
  Wrapper,
  ScLoaderWrapper,
  ScArrowLoader,
} from '../../styled'

import { CompanyInfo } from '../../../CompanyInfo'

const Login = () => {
  const {
    authError,
    client_id,
    email,
    formError,
    formRef,
    handleAuthButtonClick,
    handleModalOpen,
    handleSubmit,
    isFetching,
    isRecoveryPopupOpen,
    isSubmitDisabled,
    lang,
    onEmailBlur,
    onEmailChange,
    onPasswordBlur,
    onPasswordChange,
    password,
    redirect_uri,
    response_mode,
    response_type,
    scope,
    setIsRecoveryPopupOpen,
    url,
  } = useLoginForm()

  return (
    <Wrapper>
      <CenterBlock>
        <Logo />
        <Form
          method='POST'
          ref={formRef}
          action={url}
          onSubmit={handleSubmit}
        >
          <BlockTitle t='step_title_login' />

          <InputGroup>
            <Input
              autoFocus
              type='email'
              name='email'
              autoComplete='email'
              placeholderLexic='form_email'
              value={email}
              onChange={onEmailChange}
              onBlur={onEmailBlur}
            />
            <PasswordInput
              type='password'
              name='password'
              autoComplete='current-password'
              placeholderLexic='form_password'
              value={password}
              onChange={onPasswordChange}
              onBlur={onPasswordBlur}
            />
            <input type='hidden' name='client_id' value={client_id} />
            <input type='hidden' name='response_mode' value={response_mode} />
            <input type='hidden' name='response_type' value={response_type} />
            <input type='hidden' name='scope' value={scope} />
            <input type='hidden' name='lang' value={lang} />
            <input type='hidden' name='redirect_uri' value={redirect_uri} />
          </InputGroup>

          <ButtonsBlock>
            <Error>
              <T9n t={formError} />
              <T9n t={authError} />
            </Error>

            <ButtonSolid type='submit' disabled={isSubmitDisabled}>
              {
                isFetching
                  ? (
                    <ScLoaderWrapper>
                      <ScArrowLoader />
                    </ScLoaderWrapper>
                  ) : (<T9n t='login' />)
              }
            </ButtonSolid>

            <RegisterButton
              to={`${PAGES.registration}${window.location.search}`}
              id='auth_registration'
            >
              <T9n t='register' />
            </RegisterButton>
            <ContinueWith t='or_continue_with' />
            <AuthButtonsContainer>
              <AuthButton onClick={handleAuthButtonClick(AuthProviders.Google)}>
                <AuthButtonImage authProvider={AuthProviders.Google} />
                <AuthButtonText>Google</AuthButtonText>
              </AuthButton>
              <AuthButton onClick={handleAuthButtonClick(AuthProviders.Facebook)}>
                <AuthButtonImage authProvider={AuthProviders.Facebook} />
                <AuthButtonText>Facebook</AuthButtonText>
              </AuthButton>
              {/* <AuthButton onClick={handleAuthButtonClick(AuthProviders.AppleID)}> */}
              {/*  <AuthButtonImage authProvider={AuthProviders.AppleID} /> */}
              {/*  <AuthButtonText>Apple ID</AuthButtonText> */}
              {/* </AuthButton> */}
            </AuthButtonsContainer>
          </ButtonsBlock>
          <Container>
            <ForgotPass onClick={handleModalOpen}>
              <T9n t='forgot_password' />
            </ForgotPass>
            <LanguageSelectWrapper>
              <LanguageSelect />
            </LanguageSelectWrapper>
          </Container>
        </Form>
        <RecoveryPopup isModalOpen={isRecoveryPopupOpen} setIsModalOpen={setIsRecoveryPopupOpen} />
      </CenterBlock>
      <CompanyInfo
        clientName={client.name}
        textAlign='center'
        width='450px'
      />
    </Wrapper>
  )
}

export default Login