import React from 'react';
import { useLanguage, useOrder, useConfig, useSession, useApi, ToastType, useToast } from 'ordering-components-external/native';
import { useTheme } from 'styled-components/native';
import { StyleSheet, View } from 'react-native';
import { OButton, OIcon, OText } from '../shared';
import { LanguageSelector } from '../LanguageSelector';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useWindowDimensions, Platform } from 'react-native';
import uuid from 'react-native-uuid';

export const Home = (props: any) => {
  const { onNavigationRedirect, businessSlug } = props;
  const { width, height } = useWindowDimensions();
  const [, t] = useLanguage();
  const [orderState, { handleOrderStateLoading, setStateInitialValues }] = useOrder();
  const [{ configs }] = useConfig()
  const [, { login }] = useSession()
  const [ordering] = useApi()
  const [, { showToast }] = useToast()

  const theme = useTheme();

  const handleCreateGuestUser = async (values: any) => {
    try {
      await handleOrderStateLoading(true)
      const { content: { error, result } } = await ordering.users().save(values)
      if (!error) {
        await login({
          user: result,
          token: result.session?.access_token
        })
      } else {
        showToast(ToastType.Error, t('ERROR_CREATING_GUEST_USER', 'Error creating guest users'))
      }
      await handleOrderStateLoading(false)
    } catch (err) {
      await handleOrderStateLoading(false)
      showToast(ToastType.Error, t('ERROR_CREATING_GUEST_USER', 'Error creating guest users'))
    }
  }

  const handleUpdateGuest = async () => {
    const guestToken = uuid.v4()
    if (guestToken) await handleCreateGuestUser({ guest_token: guestToken })
  }

  return (
    <View style={styles.container}>
      <View>
        <View style={{ paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0 }}>
          <LanguageSelector />
        </View>
        <OIcon
          src={theme.images.logos.logotypeInvert}
          style={{
            ...styles.logo,
            resizeMode: 'contain',
            width: width - 80,
            height: (width - 80) * 0.25,
          }}
        />
      </View>
      <View style={styles.wrapperBtn}>
        <OText color={theme.colors.white} size={40}>
          {t('WELCOME', 'Welcome!')}
        </OText>
        <OText color={theme.colors.white} size={14} style={{ marginBottom: 46 }}>
          {t('SUBTITLE_HOME', "Let's start to order now")}
        </OText>
        <OButton
          text={t('LOGIN_NOW', 'Login now')}
          style={styles.buttons}
          isCircle={false}
          onClick={() => onNavigationRedirect('Login')}
          imgRightSrc={null}
          isDisabled={orderState?.loading}
        />
        <OButton
          text={t('SIGNUP', 'Signup')}
          bgColor={theme.colors.primaryContrast}
          borderColor={theme.colors.primaryContrast}
          style={styles.buttons}
          textStyle={{ color: 'black' }}
          onClick={() => onNavigationRedirect('Signup')}
          imgRightSrc={null}
          isDisabled={orderState?.loading}
        />
        <TouchableOpacity
          disabled={orderState?.loading}
          style={{ ...styles.textLink, marginTop: 12 }}
          onPress={() => handleUpdateGuest()}>
          <OText weight="normal" size={18} color={orderState?.loading ? '#ccc' : theme.colors.white}>
            {t('CONTINUE_AS_GUEST', 'Continue as guest')}
          </OText>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  textLink: {
    flexDirection: 'row',
    textAlign: 'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
  },
  logo: {
    marginTop: 64,
  },
  buttons: {
    marginVertical: 6,
    borderRadius: 7.6,
  },
  sloganText: {
    textAlign: 'center',
  },
  wrapperBtn: {
    width: '100%',
    position: 'absolute',
    bottom: 0,
    marginBottom: 20,
  },
});
