import { T9n } from 'features/T9n'

import { PasswordInput } from '../PasswordInput'
import { Logo } from '../Logo'
import { useChangePasswordForm } from './hooks'
import {
  BlockTitle,
  CenterBlock,
  FormText,
  InputGroup,
  ButtonsBlock,
  Form,
  ButtonSolid,
  Error,
  ChangePasswordModalWrapper,
  ChangePasswordModal,
  ChangePasswordModalIcon,
  ChangePasswordModalTitle,
  ChangePasswordModalText,
  ChangePasswordModalButton,
  ScArrowLoader,
} from '../../styled'

const ChangePassword = () => {
  const {
    confirmPassword,
    disabled,
    error,
    handleSubmit,
    isFetching,
    isSubmitDisabled,
    modalButtonClick,
    modalOpen,
    onConfirmPasswordChange,
    onPasswordChange,
    password,
  } = useChangePasswordForm()

  return (
    <CenterBlock>
      {modalOpen && (
        <ChangePasswordModalWrapper>
          <ChangePasswordModal>
            <ChangePasswordModalIcon src='images/success-icon.svg' />
            <ChangePasswordModalTitle>
              <T9n t='password_changed_success' />
            </ChangePasswordModalTitle>
            <ChangePasswordModalText>
              <T9n t='use_new_password' />
            </ChangePasswordModalText>
            <ChangePasswordModalButton onClick={modalButtonClick}>
              <T9n t='ok' />
            </ChangePasswordModalButton>
          </ChangePasswordModal>
        </ChangePasswordModalWrapper>
      )}
      <Logo />
      <Form
        onSubmit={handleSubmit}
      >
        <BlockTitle t='set_new_password' />
        <FormText>
          <T9n t='set_new_password_for_your_account' />
        </FormText>
        <InputGroup>
          <PasswordInput
            type='password'
            name='password'
            autoComplete='current-password'
            placeholderLexic='password_new'
            value={password}
            onChange={onPasswordChange}
          />
          <PasswordInput
            type='password'
            name='confirm_password'
            autoComplete='current-password'
            placeholderLexic='password_repeat'
            value={confirmPassword}
            onChange={onConfirmPasswordChange}
            disabled={disabled}
          />
        </InputGroup>
        <Error>
          <T9n t={error} />
        </Error>
        <ButtonsBlock>
          <ButtonSolid disabled={isSubmitDisabled}>
            {
              isFetching
                ? <ScArrowLoader />
                : <T9n t='change_password' />
            }
          </ButtonSolid>
        </ButtonsBlock>
      </Form>
    </CenterBlock>
  )
}

export default ChangePassword