import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {SafeAreaView} from 'react-native-safe-area-context';
import {IconPhoneOff, IconX} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {Button, IconButton, Typography} from '@components';
import {LIGHT_THEME, SPACING} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

export function CallEnded() {
  const {t} = useTranslation();
  const {navigate} = useNavigation();

  const openChatsScreen = () => {
    // @ts-expect-error - Navigation type error
    navigate(Screens.TABS, {
      screen: Screens.CHATS_HOME,
    });
  };

  const openHomeScreen = () => {
    // @ts-expect-error - Navigation type error
    navigate(Screens.TABS, {
      screen: Screens.HOME,
      params: {
        topicId: undefined,
      },
    });
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <View style={styles.header}>
          <Typography
            color={LIGHT_THEME.neutralText}
            variant={'s'}
            weight={'semiBold'}>
            {t('calls.lobby_header')}
          </Typography>
          <IconButton
            style={styles.closeButton}
            variant={'flat'}
            Icon={IconX}
            onPress={openHomeScreen}
          />
        </View>
        <View style={styles.content}>
          <View style={styles.phoneOffIconWrapper}>
            <IconPhoneOff size={SPACING.x3} color={LIGHT_THEME.warningText} />
          </View>
          <View style={styles.contentTextContainer}>
            <Typography variant={'m'} weight={'semiBold'}>
              {t('calls.call_ended')}
            </Typography>
            <Typography align={'center'} variant={'xs'}>
              {t('calls.call_finished_description')}
            </Typography>
          </View>
        </View>
        <View style={styles.footer}>
          <Button
            text={t('calls.call_finished_secondary_action')}
            onPress={openChatsScreen}
          />
          <Button
            variant={'tertiary'}
            text={t('calls.call_finished_primary_action')}
            onPress={openHomeScreen}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}