import React, { useEffect, useRef, useState } from 'react';
import { useRoute } from '@react-navigation/native';
import LottieView from 'lottie-react-native';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Icon } from '@rneui/themed';

import { BlueSpacing20 } from '../../BlueComponents';
import { MultisigHDWallet } from '../../class';
import BottomModal from '../../components/BottomModal';
import Button from '../../components/Button';
import ListItem from '../../components/ListItem';
import SafeArea from '../../components/SafeArea';
import { useTheme } from '../../components/themes';
import loc from '../../loc';
import { useSettings } from '../../hooks/context/useSettings';
import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';

const WalletsAddMultisig = () => {
  const { colors } = useTheme();
  const { navigate } = useExtendedNavigation();
  const loadingAnimation = useRef();
  const bottomModalRef = useRef();
  const { walletLabel } = useRoute().params;
  const [m, setM] = useState(2);
  const [n, setN] = useState(3);
  const [format, setFormat] = useState(MultisigHDWallet.FORMAT_P2WSH);
  const { isAdvancedModeEnabled } = useSettings();

  const stylesHook = StyleSheet.create({
    root: {
      backgroundColor: colors.elevated,
      justifyContent: 'space-between',
      flex: 1,
    },
    textdesc: {
      color: colors.alternativeTextColor,
    },
    textSubtitle: {
      color: colors.alternativeTextColor,
    },
    selectedItem: {
      paddingHorizontal: 8,
      backgroundColor: colors.elevated,
    },
    deSelectedItem: {
      paddingHorizontal: 8,
      backgroundColor: 'transparent',
    },
    textHeader: {
      color: colors.outputValue,
    },
  });

  useEffect(() => {
    if (loadingAnimation.current) {
      /*
      https://github.com/lottie-react-native/lottie-react-native/issues/832#issuecomment-1008209732
      Temporary workaround until Lottie is fixed.
      */
      setTimeout(() => {
        loadingAnimation.current?.reset();
        loadingAnimation.current?.play();
      }, 100);
    }
  }, []);

  const onLetsStartPress = () => {
    bottomModalRef.current?.dismiss();
    navigate('WalletsAddMultisigStep2', { m, n, format, walletLabel });
  };

  const setFormatP2wsh = () => setFormat(MultisigHDWallet.FORMAT_P2WSH);

  const setFormatP2shP2wsh = () => setFormat(MultisigHDWallet.FORMAT_P2SH_P2WSH);

  const setFormatP2sh = () => setFormat(MultisigHDWallet.FORMAT_P2SH);

  const isP2wsh = () => format === MultisigHDWallet.FORMAT_P2WSH;

  const isP2shP2wsh = () => format === MultisigHDWallet.FORMAT_P2SH_P2WSH || format === MultisigHDWallet.FORMAT_P2SH_P2WSH_ALT;

  const isP2sh = () => format === MultisigHDWallet.FORMAT_P2SH;

  const increaseM = () => {
    if (n === m) return;
    if (m === 7) return;
    setM(m + 1);
  };
  const decreaseM = () => {
    if (m === 2) return;
    setM(m - 1);
  };

  const increaseN = () => {
    if (n === 7) return;
    setN(n + 1);
  };
  const decreaseN = () => {
    if (n === m) return;
    setN(n - 1);
  };

  const renderModal = () => {
    return (
      <BottomModal
        sizes={['auto', 'large']}
        ref={bottomModalRef}
        contentContainerStyle={styles.modalContentShort}
        backgroundColor={colors.elevated}
      >
        <Text style={[styles.textHeader, stylesHook.textHeader]}>{loc.multisig.quorum_header}</Text>
        <Text style={[styles.textSubtitle, stylesHook.textSubtitle]}>{loc.multisig.required_keys_out_of_total}</Text>
        <View style={styles.rowCenter}>
          <View style={styles.column}>
            <TouchableOpacity accessibilityRole="button" onPress={increaseM} disabled={n === m || m === 7} style={styles.chevron}>
              <Icon
                name="chevron-up"
                size={22}
                type="font-awesome-5"
                color={n === m || m === 7 ? colors.buttonDisabledTextColor : '#007AFF'}
              />
            </TouchableOpacity>
            <Text style={[styles.textM, stylesHook.textHeader]}>{m}</Text>
            <TouchableOpacity accessibilityRole="button" onPress={decreaseM} disabled={m === 2} style={styles.chevron}>
              <Icon name="chevron-down" size={22} type="font-awesome-5" color={m === 2 ? colors.buttonDisabledTextColor : '#007AFF'} />
            </TouchableOpacity>
          </View>

          <View style={styles.columnOf}>
            <Text style={styles.textOf}>{loc.multisig.of}</Text>
          </View>

          <View style={styles.column}>
            <TouchableOpacity accessibilityRole="button" disabled={n === 7} onPress={increaseN} style={styles.chevron}>
              <Icon name="chevron-up" size={22} type="font-awesome-5" color={n === 7 ? colors.buttonDisabledTextColor : '#007AFF'} />
            </TouchableOpacity>
            <Text style={[styles.textM, stylesHook.textHeader]}>{n}</Text>
            <TouchableOpacity accessibilityRole="button" onPress={decreaseN} disabled={n === m} style={styles.chevron} testID="DecreaseN">
              <Icon name="chevron-down" size={22} type="font-awesome-5" color={n === m ? colors.buttonDisabledTextColor : '#007AFF'} />
            </TouchableOpacity>
          </View>
        </View>

        <BlueSpacing20 />

        <Text style={[styles.textHeader, stylesHook.textHeader]}>{loc.multisig.wallet_type}</Text>
        <BlueSpacing20 />
        <ListItem
          bottomDivider={false}
          onPress={setFormatP2wsh}
          title={`${loc.multisig.native_segwit_title} (${MultisigHDWallet.FORMAT_P2WSH})`}
          checkmark={isP2wsh()}
          containerStyle={[styles.borderRadius6, styles.item, isP2wsh() ? stylesHook.selectedItem : stylesHook.deSelectedItem]}
        />
        <ListItem
          bottomDivider={false}
          onPress={setFormatP2shP2wsh}
          title={`${loc.multisig.wrapped_segwit_title} (${MultisigHDWallet.FORMAT_P2SH_P2WSH})`}
          checkmark={isP2shP2wsh()}
          containerStyle={[styles.borderRadius6, styles.item, isP2shP2wsh() ? stylesHook.selectedItem : stylesHook.deSelectedItem]}
        />
        <ListItem
          bottomDivider={false}
          onPress={setFormatP2sh}
          title={`${loc.multisig.legacy_title} (${MultisigHDWallet.FORMAT_P2SH})`}
          checkmark={isP2sh()}
          containerStyle={[styles.borderRadius6, styles.item, isP2sh() ? stylesHook.selectedItem : stylesHook.deSelectedItem]}
        />
      </BottomModal>
    );
  };

  const showAdvancedOptionsModal = () => {
    bottomModalRef.current.present();
  };

  const getCurrentlySelectedFormat = code => {
    switch (code) {
      case 'format':
        return WalletsAddMultisig.getCurrentFormatReadable(format);
      case 'quorum':
        return loc.formatString(loc.multisig.quorum, { m, n });
      default:
        throw new Error('This should never happen');
    }
  };

  return (
    <SafeArea style={stylesHook.root}>
      <View style={styles.descriptionContainer}>
        <View style={styles.imageWrapper}>
          <LottieView source={require('../../img/msvault.json')} style={styles.lottie} autoPlay ref={loadingAnimation} loop={false} />
        </View>
        <BlueSpacing20 />
        <Text style={[styles.textdesc, stylesHook.textdesc]}>
          {loc.multisig.what_is_vault}
          <Text style={[styles.textdescBold, stylesHook.textdesc]}>
            {loc.formatString(loc.multisig.what_is_vault_numberOfWallets, { m, n })}
          </Text>
          <Text style={[styles.textdesc, stylesHook.textdesc]}>{loc.multisig.what_is_vault_wallet}</Text>
        </Text>

        <BlueSpacing20 />

        <Text style={[styles.textdesc, stylesHook.textdesc]}>
          {loc.multisig.needs}
          <Text style={[styles.textdescBold, stylesHook.textdesc]}>
            {loc.formatString(loc.multisig.what_is_vault_description_number_of_vault_keys, { m })}
          </Text>
          <Text style={[styles.textdesc, stylesHook.textdesc]}>
            {m === 2 && n === 3 ? loc.multisig.what_is_vault_description_to_spend : loc.multisig.what_is_vault_description_to_spend_other}
          </Text>
        </Text>
      </View>
      {isAdvancedModeEnabled && (
        <View>
          <ListItem
            testID="VaultAdvancedCustomize"
            onPress={showAdvancedOptionsModal}
            title={loc.multisig.vault_advanced_customize}
            subtitle={`${getCurrentlySelectedFormat('format')}, ${getCurrentlySelectedFormat('quorum')}`}
            chevron
          />
        </View>
      )}
      <View style={styles.buttonContainer}>
        <Button
          testID="LetsStart"
          buttonTextColor={colors.buttonAlternativeTextColor}
          title={loc.multisig.lets_start}
          onPress={onLetsStartPress}
        />
      </View>
      {renderModal()}
    </SafeArea>
  );
};

const styles = StyleSheet.create({
  item: {
    paddingHorizontal: 0,
  },
  descriptionContainer: {
    alignContent: 'center',
    justifyContent: 'center',
    flex: 0.8,
  },
  modalContentShort: {
    padding: 24,
  },
  borderRadius6: {
    borderRadius: 6,
    minHeight: 54,
  },
  buttonContainer: {
    padding: 24,
  },
  column: {
    paddingRight: 20,
    paddingLeft: 20,
  },
  chevron: {
    paddingBottom: 10,
    paddingTop: 10,
    fontSize: 24,
  },
  columnOf: {
    paddingRight: 20,
    paddingLeft: 20,
    justifyContent: 'center',
  },
  textdesc: {
    fontWeight: '500',
    alignSelf: 'center',
    textAlign: 'center',
  },
  textdescBold: {
    fontWeight: '700',
    alignSelf: 'center',
    textAlign: 'center',
  },
  textM: {
    fontSize: 50,
    fontWeight: '700',
  },
  textOf: {
    fontSize: 30,
    color: '#9AA0AA',
  },
  lottie: {
    width: 233,
    height: 176,
  },
  textHeader: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  textSubtitle: {
    fontSize: 13,
    fontWeight: '500',
    marginTop: 4,
  },
  imageWrapper: {
    borderWidth: 0,
    alignItems: 'center',
  },
  rowCenter: {
    flexDirection: 'row',
    justifyContent: 'center',
    paddingVertical: 40,
  },
});

WalletsAddMultisig.getCurrentFormatReadable = f => {
  switch (f) {
    case MultisigHDWallet.FORMAT_P2WSH:
      return loc.multisig.native_segwit_title;
    case MultisigHDWallet.FORMAT_P2SH_P2WSH:
    case MultisigHDWallet.FORMAT_P2SH_P2WSH_ALT:
      return loc.multisig.wrapped_segwit_title;
    case MultisigHDWallet.FORMAT_P2SH:
      return loc.multisig.legacy_title;
    default:
      throw new Error('This should never happen');
  }
};

WalletsAddMultisig.initialParams = {
  walletLabel: loc.multisig.default_label,
};

export default WalletsAddMultisig;