import { Button } from 'antd'
import React, { FC } from 'react'
import { useGuardContext } from '../../../../context/global/context'
import { GuardScenes } from '../../types'

import './style.less'
import { useTranslation } from 'react-i18next'

export interface RegisterFormFooterProps {
  loading: boolean
}

export const RegisterFormFooter: FC<RegisterFormFooterProps> = ({
  loading,
}) => {
  const {
    setValue,
    state: { config },
  } = useGuardContext()
  const { t } = useTranslation()

  return (
    <>
      <Button
        htmlType="submit"
        size="large"
        type="primary"
        loading={loading}
        block
      >
        {loading
          ? t(
              `map.${config.text?.registerBtn?.loading}`,
              config.text?.registerBtn?.loading
            )
          : t(
              `map.${config.text?.registerBtn?.normal}`,
              config.text?.registerBtn?.normal
            )}
      </Button>

      <div className="approw-guard-form-actions">
        <div className="approw-guard-tip-btn-comb">
          <span className="approw-guard-tip">{t('common.alreadyHasAcc')}</span>
          <Button
            onClick={() => setValue('guardScenes', GuardScenes.Login)}
            className="approw-guard-text-btn"
            type="text"
          >
            {t('common.loginImmediate')}
          </Button>
        </div>
      </div>
    </>
  )
}