import React, { useEffect, useState, useRef } from 'react';
import { StyleSheet, View, Keyboard, Modal, Platform } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import { useForm, Controller } from 'react-hook-form';
import { PhoneInputNumber } from '../PhoneInputNumber';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Recaptcha from 'react-native-recaptcha-that-works'
import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
import ReactNativeHapticFeedback from "react-native-haptic-feedback";

import {
  LoginForm as LoginFormController,
  useLanguage,
  useConfig,
  useSession,
  ToastType,
  useToast,
} from 'ordering-components/native';
import { useTheme } from 'styled-components/native';
import { FacebookLogin } from '../FacebookLogin';
import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
import { OModal } from '../../../../../src/components/shared';
import {
  Container,
  ButtonsWrapper,
  LoginWith,
  FormSide,
  FormInput,
  OTabs,
  OTab,
  SocialButtons,
  OrSeparator,
  LineSeparator,
  SkeletonWrapper,
  TabBtn,
  RecaptchaButton
} from './styles';

import NavBar from '../NavBar';

import { OText, OButton, OInput } from '../shared';
import { LoginParams } from '../../types';
import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
import { GoogleLogin } from '../GoogleLogin';
import { AppleLogin } from '../AppleLogin';
import { Otp } from './Otp'
import { TouchableOpacity } from 'react-native-gesture-handler';
import Alert from '../../../../../src/providers/AlertProvider'

const LoginFormUI = (props: LoginParams) => {
  const {
    loginTab,
    formState,
    navigation,
    useLoginByEmail,
    useLoginByCellphone,
    useLoginOtp,
    loginButtonText,
    forgotButtonText,
    verifyPhoneState,
    checkPhoneCodeState,
    registerButtonText,
    setCheckPhoneCodeState,
    handleButtonLoginClick,
    handleSendVerifyCode,
    handleCheckPhoneCode,
    onNavigationRedirect,
    notificationState,
    handleReCaptcha,
    enableReCaptcha,
    otpType,
    setOtpType,
    generateOtpCode,
    useLoginOtpEmail,
    useLoginOtpCellphone,
    useLoginOtpWhatsapp,
    isGuest,
    setCellphoneStartZero
  } = props;

  const [, { showToast }] = useToast();
  const [, t] = useLanguage();
  const [{ configs }] = useConfig();
  const [, { login }] = useSession();
  const { control, handleSubmit, errors, reset, register, setValue } = useForm();
  const [passwordSee, setPasswordSee] = useState(false);
  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isFBLoading, setIsFBLoading] = useState(false);
  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
  const [phoneInputData, setPhoneInputData] = useState({
    error: '',
    phone: {
      country_phone_code: null,
      cellphone: null,
    },
  });
  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
  const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
  const [tabLayouts, setTabLayouts] = useState<any>({})
  const [otpError, setOtpError] = useState(null)
  const tabsRef = useRef<any>(null)
  const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
  const theme = useTheme();
  const isOtpEmail = loginTab === 'otp' && otpType === 'email'
  const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'

  const [isCheckingCode, setCheckingCode] = useState(false)

  const googleLoginEnabled = configs?.google_login_enabled?.value === '1'
  const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1'
  const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1')

  const loginStyle = StyleSheet.create({
    btnOutline: {
      backgroundColor: '#FFF',
      color: theme.colors.primary,
      borderRadius: 7.6,
    },
    inputStyle: {
      marginBottom: 28,
      borderWidth: 1,
      // borderColor: theme.colors.border,
      borderRadius: 7.6,
    },
    line: {
      height: 1,
      backgroundColor: theme.colors.border,
      flexGrow: 1,
      marginBottom: 7,
    },
    recaptchaIcon: {
      width: 100,
      height: 100,
    },
    borderStyleBase: {
      width: 30,
      height: 45
    },

    borderStyleHighLighted: {
      borderColor: "#03DAC6",
    },

    underlineStyleBase: {
      width: 45,
      height: 60,
      borderWidth: 1,
      fontSize: 16
    },

    underlineStyleHighLighted: {
      borderColor: theme.colors.primary,
      color: theme.colors.primary,
      fontSize: 16
    },
  });

  const emailRef = useRef<any>({});
  const passwordRef = useRef<any>({});
  const recaptchaRef = useRef<any>({});
  const otpChannelRef = useRef<number>(2);

  const handleChangeTab = (val: string, otpType?: string) => {
    props.handleChangeTab(val);
    setPasswordSee(false);
    handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
  };

  const vibrateApp = (impact?: string) => {
    const options = {
      enableVibrateFallback: true,
      ignoreAndroidSystemSettings: false
    };
    ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
  }

  const onSubmit = (values?: any) => {
    Keyboard.dismiss();
    if (loginTab === 'otp') {
      if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
        showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
        vibrateApp()
        return
      }
      if (otpType === 'cellphone' && phoneInputData?.error && !phoneInputData?.phone?.cellphone) {
        showToast(ToastType.Error, t('PHONE_NUMBER_REQUIRED', 'Phone number is required'));
        return
      }
      if (loginTab === 'otp') {
        generateOtpCode({
          ...values,
          ...phoneInputData.phone
        }, otpChannelRef.current)
      }
      setWillVerifyOtpState(true)
    } else {
      if (phoneInputData.error) {
        showToast(ToastType.Error, phoneInputData.error);
        vibrateApp()
        return;
      }
      handleButtonLoginClick({
        ...values,
        ...phoneInputData.phone,
      });
    }

  };
  const handleVerifyCodeClick = () => {
    if (phoneInputData.error) {
      showToast(ToastType.Error, phoneInputData.error);
      vibrateApp()
      return;
    }
    if (
      !phoneInputData.error &&
      !phoneInputData.phone.country_phone_code &&
      !phoneInputData.phone.cellphone
    ) {
      showToast(
        ToastType.Error,
        t(
          'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
          'The field Mobile phone is required.',
        ),
      );
      vibrateApp()
      return;
    }
    handleSendVerifyCode && handleSendVerifyCode(phoneInputData.phone);
    setIsLoadingVerifyModal(true);
  };

  const handleSuccessFacebook = (user: any) => {
    login({
      user,
      token: user.session.access_token,
    });
  };

  const handleChangeInputEmail = (value: string, onChange: any) => {
    onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
  };

  const handleOpenRecaptcha = () => {
    setRecaptchaVerified(false)
    if (!recaptchaConfig?.siteKey) {
      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
      vibrateApp()
      return
    }
    if (!recaptchaConfig?.baseUrl) {
      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
      vibrateApp()
      return
    }

    recaptchaRef.current.open()
  }

  const onRecaptchaVerify = (token: any) => {
    setRecaptchaVerified(true)
    handleReCaptcha({ code: token, version: recaptchaConfig?.version })
  }

  const handleChangeOtpType = (type: string) => {
    handleChangeTab('otp', type)
    setOtpType(type)
  }

  const handleLoginOtp = async (code: string) => {
    if (!code) return
    const logged = await handleButtonLoginClick({ code })
    setCheckingCode(false)
    if (logged) {
      setWillVerifyOtpState(false)
    } else {
      setOtpError(t('OTP_CODE_INCORRECT', 'Otp code incorrect'))
    }
  }

  const closeAlert = () => {
    setAlertState({
      open: false,
      title: '',
      content: []
    })
  }

  const handleCategoryScroll = (opc: string) => {
    tabsRef.current.scrollTo({
      x: tabLayouts?.[opc]?.x - 40,
      animated: true
    })
  }

  const handleOnLayout = (event: any, opc: string) => {
    const _tabLayouts = { ...tabLayouts }
    const categoryKey = opc
    _tabLayouts[categoryKey] = event.nativeEvent.layout
    setTabLayouts(_tabLayouts)
  }

  const handleChangePhoneNumber = (number: any, rawNumber: any) => {
    setPhoneInputData(number)
    setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
  }

  useEffect(() => {
    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
      if (configs?.security_recaptcha_type?.value === 'v3' &&
        configs?.security_recaptcha_score_v3?.value > 0 &&
        configs?.security_recaptcha_site_key_v3?.value
      ) {
        setRecaptchaConfig({
          version: 'v3',
          siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
          baseUrl: configs?.security_recaptcha_base_url?.value || null
        })
        return
      }
      if (configs?.security_recaptcha_site_key?.value) {
        setRecaptchaConfig({
          version: 'v2',
          siteKey: configs?.security_recaptcha_site_key?.value || null,
          baseUrl: configs?.security_recaptcha_base_url?.value || null
        })
      }
    }
  }, [configs, enableReCaptcha])

  useEffect(() => {
    if (!formState.loading && formState.result?.error) {
      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
        setRecaptchaVerified(false)
        setRecaptchaConfig({
          version: 'v2',
          siteKey: configs?.security_recaptcha_site_key?.value || null,
          baseUrl: configs?.security_recaptcha_base_url?.value || null
        })
        showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
        vibrateApp()
        return
      }
      formState.result?.result &&
        showToast(
          ToastType.Error,
          typeof formState.result?.result === 'string'
            ? formState.result?.result
            : formState.result?.result[0],
        );
      formState.result?.result && vibrateApp()
    }
  }, [formState]);

  useEffect(() => {
    if (verifyPhoneState && !verifyPhoneState?.loading) {
      if (verifyPhoneState.result?.error) {
        const message =
          typeof verifyPhoneState?.result?.result === 'string'
            ? verifyPhoneState?.result?.result
            : verifyPhoneState?.result?.result[0];
        verifyPhoneState.result?.result && showToast(ToastType.Error, message);
        verifyPhoneState.result?.result && vibrateApp();
        setIsLoadingVerifyModal(false);
        return;
      }

      const okResult = verifyPhoneState.result?.result === 'OK';
      if (okResult) {
        !isModalVisible && setIsModalVisible(true);
        setIsLoadingVerifyModal(false);
      }
    }
  }, [verifyPhoneState]);

  useEffect(() => {
    if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
    else setValue('cellphone', '')
  }, [phoneInputData?.phone?.cellphone])

  useEffect(() => {
    register('cellphone', {
      required: loginTab === 'cellphone'
        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
        : null
    })
  }, [register])

  useEffect(() => {
    reset()
  }, [loginTab])

  useEffect(() => {
    if (checkPhoneCodeState?.result?.error) {
      setAlertState({
        open: true,
        content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
        title: ''
      })
    }
  }, [checkPhoneCodeState])

  useEffect(() => {
    if (!!Object.values(errors)?.length) vibrateApp()
  }, [errors])

  return (
    <Container>
      {isGuest ? (
        <OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('LOGIN', 'Login')}</OText>
      ) : (
        <NavBar
          title={t('LOGIN', 'Login')}
          titleAlign={'center'}
          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
          showCall={false}
          btnStyle={{ paddingLeft: 0 }}
          titleWrapStyle={{ paddingHorizontal: 0 }}
          titleStyle={{ marginRight: 0, marginLeft: 0 }}
        />
      )}
      <FormSide>
        {(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
          <LoginWith>
            <OTabs
              horizontal
              showsHorizontalScrollIndicator={false}
              ref={tabsRef}
            >
              {useLoginByEmail && (
                <TabBtn
                  onPress={() => handleChangeTab('email')}
                  onLayout={(event: any) => handleOnLayout(event, 'email')}
                >
                  <OTab
                    style={{
                      borderBottomColor:
                        loginTab === 'email'
                          ? theme.colors.textNormal
                          : theme.colors.border,
                    }}>
                    <OText
                      size={14}
                      color={
                        loginTab === 'email'
                          ? theme.colors.textNormal
                          : theme.colors.disabled
                      }
                      weight={loginTab === 'email' ? 'bold' : 'normal'}>
                      {t('LOGIN_BY_EMAIL', 'by Email')}
                    </OText>
                  </OTab>
                </TabBtn>
              )}
              {useLoginByCellphone && (
                <TabBtn
                  onPress={() => handleChangeTab('cellphone')}
                  onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
                >
                  <OTab
                    style={{
                      borderBottomColor:
                        loginTab === 'cellphone'
                          ? theme.colors.textNormal
                          : theme.colors.border,
                    }}>
                    <OText
                      size={14}
                      color={
                        loginTab === 'cellphone'
                          ? theme.colors.textNormal
                          : theme.colors.disabled
                      }
                      weight={loginTab === 'cellphone' ? 'bold' : 'normal'}>
                      {t('LOGIN_BY_PHONE', 'by Phone')}
                    </OText>
                  </OTab>
                </TabBtn>
              )}
              {useLoginOtpEmail && (
                <TabBtn
                  onPress={() => handleChangeOtpType('email')}
                  onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
                >
                  <OTab
                    style={{
                      borderBottomColor:
                        isOtpEmail
                          ? theme.colors.textNormal
                          : theme.colors.border,
                    }}>
                    <OText
                      size={14}
                      color={
                        isOtpEmail
                          ? theme.colors.textNormal
                          : theme.colors.disabled
                      }
                      weight={isOtpEmail ? 'bold' : 'normal'}>
                      {t('BY_OTP_EMAIL', 'By Otp Email')}
                    </OText>
                  </OTab>
                </TabBtn>
              )}
              {useLoginOtpCellphone && (
                <TabBtn
                  onPress={() => handleChangeOtpType('cellphone')}
                  onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
                >
                  <OTab
                    style={{
                      borderBottomColor:
                        isOtpCellphone
                          ? theme.colors.textNormal
                          : theme.colors.border,
                    }}>
                    <OText
                      size={14}
                      color={
                        isOtpCellphone
                          ? theme.colors.textNormal
                          : theme.colors.disabled
                      }
                      weight={isOtpCellphone ? 'bold' : 'normal'}>
                      {t('BY_OTP_PHONE', 'By Otp Phone')}
                    </OText>
                  </OTab>
                </TabBtn>
              )}
            </OTabs>
          </LoginWith>
        )}

        {(useLoginByCellphone || useLoginByEmail || useLoginOtp) && (
          <FormInput>
            {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
              <>
                {errors?.email && (
                  <OText
                    size={14}
                    color={theme.colors.danger5}
                    weight={'normal'}>
                    {errors?.email?.message}{errors?.email?.type === 'required' && '*'}
                  </OText>
                )}
                <Controller
                  control={control}
                  render={({ onChange, value }: any) => (
                    <OInput
                      placeholder={t('EMAIL', 'Email')}
                      style={loginStyle.inputStyle}
                      icon={theme.images.general.email}
                      onChange={(e: any) => {
                        handleChangeInputEmail(e, onChange);
                      }}
                      value={value}
                      autoCapitalize="none"
                      autoCorrect={false}
                      type="email-address"
                      autoCompleteType="email"
                      returnKeyType="next"
                      onSubmitEditing={() => passwordRef.current?.focus()}
                      blurOnSubmit={false}
                      forwardRef={emailRef}
                      borderColor={errors?.email ? theme.colors.danger5 : theme.colors.border}
                    />
                  )}
                  name="email"
                  rules={{
                    required: {
                      value: true,
                      message: t(
                        'VALIDATION_ERROR_EMAIL_REQUIRED',
                        'The field Email is required',
                      ).replace('_attribute_', t('EMAIL', 'Email'))
                    },
                    pattern: {
                      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                      message: t(
                        'INVALID_ERROR_EMAIL',
                        'Invalid email address',
                      ).replace('_attribute_', t('EMAIL', 'Email')),
                    }
                  }}
                  defaultValue=""
                />
              </>

            )}
            {((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
              <View style={{ marginBottom: 28 }}>
                <PhoneInputNumber
                  data={phoneInputData}
                  handleData={handleChangePhoneNumber}
                  textInputProps={{
                    returnKeyType: 'next',
                    onSubmitEditing: () => passwordRef?.current?.focus?.(),
                  }}
                  isStartValidation={errors?.cellphone}
                />
              </View>
            )}
            {errors?.password && (
              <OText
                size={14}
                color={theme.colors.danger5}
                weight={'normal'}>
                {errors?.password?.message}{errors?.password?.type === 'required' && '*'}
              </OText>
            )}
            {loginTab !== 'otp' && (

              <Controller
                control={control}
                render={({ onChange, value }: any) => (
                  <OInput
                    isSecured={!passwordSee ? true : false}
                    placeholder={t('PASSWORD', 'Password')}
                    style={{ ...loginStyle.inputStyle, marginBottom: 14 }}
                    icon={theme.images.general.lock}
                    iconCustomRight={
                      !passwordSee ? (
                        <MaterialCommunityIcons
                          name="eye-outline"
                          size={24}
                          onPress={() => setPasswordSee(!passwordSee)}
                          color={theme.colors.disabled}
                        />
                      ) : (
                        <MaterialCommunityIcons
                          name="eye-off-outline"
                          size={24}
                          onPress={() => setPasswordSee(!passwordSee)}
                          color={theme.colors.disabled}
                        />
                      )
                    }
                    autoCapitalize='none'
                    value={value}
                    forwardRef={passwordRef}
                    onChange={(val: any) => onChange(val)}
                    returnKeyType="done"
                    onSubmitEditing={handleSubmit(onSubmit)}
                    blurOnSubmit
                    borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
                  />
                )}
                name="password"
                rules={{
                  required: {
                    value: true,
                    message: t(
                      'VALIDATION_ERROR_PASSWORD_REQUIRED',
                      'The field Password is required',
                    ).replace('_attribute_', t('PASSWORD', 'Password'))
                  }
                }}
                defaultValue=""
              />
            )}
            {onNavigationRedirect && forgotButtonText && loginTab !== 'otp' && (
              <TouchableOpacity onPress={() => onNavigationRedirect('Forgot')}>
                <OText size={14} mBottom={18}>
                  {forgotButtonText}
                </OText>
              </TouchableOpacity>
            )}

            {(enableReCaptcha && recaptchaConfig?.version) && (
              <>
                {recaptchaConfig?.version === 'v3' ? (
                  <ReCaptcha
                    url={recaptchaConfig?.baseUrl}
                    siteKey={recaptchaConfig?.siteKey}
                    containerStyle={{ height: 40 }}
                    onExecute={onRecaptchaVerify}
                    reCaptchaType={1}
                  />
                ) : (
                  <>
                    <TouchableOpacity
                      onPress={handleOpenRecaptcha}
                    >
                      <RecaptchaButton>
                        {recaptchaVerified ? (
                          <MaterialCommunityIcons
                            name="checkbox-marked"
                            size={26}
                            color={theme.colors.primary}
                          />
                        ) : (
                          <MaterialCommunityIcons
                            name="checkbox-blank-outline"
                            size={26}
                            color={theme.colors.mediumGray}
                          />
                        )}
                        <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
                      </RecaptchaButton>
                    </TouchableOpacity>
                    <Recaptcha
                      ref={recaptchaRef}
                      siteKey={recaptchaConfig?.siteKey}
                      baseUrl={recaptchaConfig?.baseUrl}
                      onVerify={onRecaptchaVerify}
                      onExpire={() => setRecaptchaVerified(false)}
                    />
                  </>)
                }
              </>
            )}
            {(loginTab === 'otp' && otpType === 'cellphone' && useLoginOtpWhatsapp)
              ? (
              <View style={{ flexDirection: 'row', gap: 10, marginTop: 10, marginBottom: 25 }}>
                <OButton
                  onClick={() => { otpChannelRef.current = 2; handleSubmit(onSubmit)() }}
                  text={t('SEND_BY_SMS', 'Send by SMS')}
                  imgRightSrc={null}
                  isLoading={formState.loading}
                  parentStyle={{ flex: 1 }}
                  style={{ borderRadius: 7.6 }}
                />
                <OButton
                  onClick={() => { otpChannelRef.current = 4; handleSubmit(onSubmit)() }}
                  text={t('SEND_BY_WHATSAPP', 'Send by WhatsApp')}
                  imgRightSrc={null}
                  isLoading={formState.loading}
                  parentStyle={{ flex: 1 }}
                  style={{ borderRadius: 7.6 }}
                />
              </View>
                )
              : (
              <OButton
                onClick={handleSubmit(onSubmit)}
                text={loginTab !== 'otp' ? loginButtonText : t('GET_VERIFY_CODE', 'Get verify code')}
                imgRightSrc={null}
                isLoading={formState.loading}
                style={{ borderRadius: 7.6, marginTop: 10, marginBottom: 25 }}
              />
                )}
            {onNavigationRedirect && registerButtonText && (
              <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
                <OText size={14}>
                  {t('NEW_ON_PLATFORM', 'New on Ordering?')}
                </OText>
                <TouchableOpacity onPress={() => onNavigationRedirect('Signup')}>
                  <OText size={14} mLeft={5} color={theme.colors.primary}>
                    {t('CREATE_ACCOUNT', 'Create account')}
                  </OText>
                </TouchableOpacity>
              </View>
            )}
          </FormInput>
        )}

        {useLoginByCellphone &&
          loginTab === 'cellphone' &&
          configs && Object.keys(configs).length > 0 &&
          (configs?.twilio_service_enabled?.value === 'true' ||
            configs?.twilio_service_enabled?.value === '1') &&
          configs?.twilio_module?.value && (
            <>
              <OrSeparator>
                <LineSeparator />
                <OText size={18} mRight={20} mLeft={20}>
                  {t('OR', 'Or')}
                </OText>
                <LineSeparator />
              </OrSeparator>

              <ButtonsWrapper mBottom={20}>
                <OButton
                  onClick={handleVerifyCodeClick}
                  text={t('GET_VERIFY_CODE', 'Get Verify Code')}
                  style={loginStyle.btnOutline}
                  imgRightSrc={null}
                  isLoading={isLoadingVerifyModal}
                  indicatorColor={theme.colors.primary}
                />
              </ButtonsWrapper>
            </>
          )}

        {configs && Object.keys(configs).length > 0 ? (
          (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
            ((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
            ((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) && !isGuest &&
          (
            <>
              <View
                style={{
                  flexDirection: 'row',
                  width: '100%',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginVertical: 15
                }}>
                <View style={loginStyle.line} />
                <OText
                  size={14}
                  mBottom={10}
                  style={{ paddingHorizontal: 19 }}
                  color={theme.colors.disabled}>
                  {t('OR', 'or')}
                </OText>
                <View style={loginStyle.line} />
              </View>
              <ButtonsWrapper>
                <SocialButtons>
                  {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
                    configs?.facebook_id?.value &&
                    facebookLoginEnabled && (
                      <FacebookLogin
                        notificationState={notificationState}
                        handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
                        handleLoading={(val: boolean) => setIsFBLoading(val)}
                        handleSuccessFacebookLogin={handleSuccessFacebook}
                      />
                    )}
                  {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
                    <GoogleLogin
                      notificationState={notificationState}
                      webClientId={configs?.google_login_client_id?.value}
                      handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
                      handleLoading={(val: boolean) => setIsFBLoading(val)}
                      handleSuccessGoogleLogin={handleSuccessFacebook}
                    />
                  )}
                  {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
                    <AppleLogin
                      notificationState={notificationState}
                      handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
                      handleLoading={(val: boolean) => setIsFBLoading(val)}
                      handleSuccessAppleLogin={handleSuccessFacebook}
                    />
                  )}
                </SocialButtons>
              </ButtonsWrapper>
            </>
          )
        ) : (
          <SkeletonWrapper>
            <Placeholder Animation={Fade}>
              <PlaceholderLine
                height={20}
                style={{ marginBottom: 15, marginTop: 10 }}
              />
              <PlaceholderLine
                height={50}
                style={{ borderRadius: 25, marginBottom: 25 }}
              />
            </Placeholder>
          </SkeletonWrapper>
        )}

        {enabledPoweredByOrdering && (
          <OText>
            Powered By Ordering.co
          </OText>
        )}
      </FormSide>
      <OModal
        open={isModalVisible}
        onClose={() => setIsModalVisible(false)}
        entireModal
        title={t('VERIFY_PHONE', 'Verify Phone')}
      >
        <VerifyPhone
          phone={phoneInputData.phone}
          verifyPhoneState={verifyPhoneState}
          checkPhoneCodeState={checkPhoneCodeState}
          handleCheckPhoneCode={handleCheckPhoneCode}
          setCheckPhoneCodeState={setCheckPhoneCodeState}
          handleVerifyCodeClick={handleVerifyCodeClick}
          onClose={() => setIsModalVisible(false)}
        />
      </OModal>
      <Modal
        visible={willVerifyOtpState}
        onDismiss={() => setWillVerifyOtpState(false)}
        animationType='slide'
      >
        <Otp
          isCheckingCode={isCheckingCode}
          setCheckingCode={setCheckingCode}
          willVerifyOtpState={willVerifyOtpState}
          otpError={otpError}
          setOtpError={setOtpError}
          setWillVerifyOtpState={setWillVerifyOtpState}
          handleLoginOtp={handleLoginOtp}
          onSubmit={onSubmit}
          setAlertState={setAlertState}
        />
      </Modal>
      <Alert
        open={alertState.open}
        content={alertState.content}
        title={alertState.title || ''}
        onAccept={closeAlert}
        onClose={closeAlert}
      />
      <Spinner visible={isFBLoading} />
    </Container>
  );
};

export const LoginForm = (props: any) => {
  const loginProps = {
    ...props,
    isRecaptchaEnable: true,
    UIComponent: LoginFormUI,
  };
  return <LoginFormController {...loginProps} />;
};