import {
  GlobalThemeView,
  ThemeText,
} from '../../../../../functions/CustomElements';
import CustomSettingsTopBar from '../../../../../functions/CustomElements/settingsTopBar';
import { ScrollView, StyleSheet, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { COLORS, SIZES } from '../../../../../constants/theme';
import { useActiveCustodyAccount } from '../../../../../../context-store/activeAccount';
import GetThemeColors from '../../../../../hooks/themeColors';
import { useTranslation } from 'react-i18next';
import { useCallback } from 'react';
import CustomButton from '../../../../../functions/CustomElements/button';
import { CENTER } from '../../../../../constants';
import { useGlobalThemeContext } from '../../../../../../context-store/theme';
import IconActionCircle from '../../../../../functions/CustomElements/actionCircleContainer';

export default function RemoveAccountPage(props) {
  const selectedAccount = props?.route?.params?.account;
  const fromPage = props?.route?.params?.from;
  const { removeAccount } = useActiveCustodyAccount();
  const { backgroundOffset, textColor } = GetThemeColors();
  const { theme, darkModeType } = useGlobalThemeContext();
  const { t } = useTranslation();
  const navigate = useNavigation();

  const handleRemove = useCallback(async () => {
    const response = await removeAccount(selectedAccount);
    if (!response.didWork) {
      navigate.navigate('ErrorScreen', { errorMessage: response.err });
      return;
    }

    if (fromPage === 'SettingsContentHome') {
      navigate.popTo('SettingsContentHome', {
        for: 'Accounts',
      });
    } else {
      navigate.popTo('SettingsHome');
    }
  }, [selectedAccount]);

  const handleCancel = useCallback(() => {
    navigate.goBack();
  }, []);

  return (
    <GlobalThemeView useStandardWidth={true}>
      <CustomSettingsTopBar />
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.contentContainer}>
          {/* Icon */}
          <IconActionCircle bottomOffset={32} icon={'Trash2'} />

          {/* Title */}
          <ThemeText
            styles={styles.title}
            content={`${t(
              'settings.accountComponents.removeAccountPage.title',
            )} ${selectedAccount.name}`}
          />

          {/* Explanation */}
          <ThemeText
            styles={[styles.explanation, { color: textColor }]}
            content={t(
              'settings.accountComponents.removeAccountPage.explanation',
              {
                context: selectedAccount?.accountType || 'imported',
              },
            )}
          />
        </View>
      </ScrollView>

      {/* Buttons */}
      <View style={styles.buttonsContainer}>
        <CustomButton
          buttonStyles={[styles.button, styles.cancelButton]}
          textContent={t(
            'settings.accountComponents.removeAccountPage.cancelButton',
          )}
          actionFunction={handleCancel}
        />
        <CustomButton
          buttonStyles={[
            styles.button,
            {
              backgroundColor:
                theme && darkModeType ? COLORS.darkModeText : COLORS.primary,
            },
          ]}
          textStyles={{
            color:
              theme && darkModeType
                ? COLORS.lightModeText
                : COLORS.darkModeText,
          }}
          textContent={t(
            'settings.accountComponents.removeAccountPage.removeButton',
          )}
          actionFunction={handleRemove}
        />
      </View>
    </GlobalThemeView>
  );
}

const styles = StyleSheet.create({
  scrollContainer: {
    flexGrow: 1,
    ...CENTER,
    paddingTop: 40,
  },
  contentContainer: {
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  title: {
    fontSize: SIZES.large,
    fontWeight: '500',
    textAlign: 'center',
    marginBottom: 20,
  },
  explanation: {
    fontSize: SIZES.medium,
    textAlign: 'center',
    lineHeight: 22,
    opacity: 0.8,
  },
  buttonsContainer: {
    paddingHorizontal: 20,
    gap: 12,
  },
  button: {
    width: '100%',
  },
  cancelButton: {
    // Additional styling if needed
  },
});
