import { useSnapshot } from 'valtio';
import { useEffect } from 'react';
import { ScrollView } from 'react-native';
import {
  AccountPill,
  FlexView,
  Icon,
  IconLink,
  NetworkButton,
  useTheme,
  useCustomDimensions
} from '@reown/appkit-ui-react-native';
import {
  ApiController,
  AssetController,
  AssetUtil,
  ConnectionsController,
  CoreHelperUtil,
  EventsController,
  ModalController,
  RouterController,
  SendController
} from '@reown/appkit-core-react-native';

import { AccountWalletFeatures } from '../../partials/w3m-account-wallet-features';
import styles from './styles';

export function AccountView() {
  const Theme = useTheme();
  const { padding } = useCustomDimensions();
  const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
  const { networkImages } = useSnapshot(AssetController.state);
  const address = CoreHelperUtil.getPlainAddress(activeAddress);
  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);

  const onProfilePress = () => {
    RouterController.push('AccountDefault');
  };

  const onNetworkPress = () => {
    RouterController.push('Networks');
    EventsController.sendEvent({
      type: 'track',
      event: 'CLICK_NETWORKS'
    });
  };

  useEffect(() => {
    SendController.resetState();
  }, []);

  return (
    <ScrollView bounces={false} contentContainerStyle={{ paddingHorizontal: padding }}>
      <NetworkButton
        imageSrc={networkImage}
        imageHeaders={ApiController._getApiHeaders()}
        onPress={onNetworkPress}
        style={styles.networkIcon}
        background={false}
      >
        <Icon name="chevronBottom" size="sm" color="fg-200" />
      </NetworkButton>
      <IconLink icon="close" style={styles.closeIcon} onPress={ModalController.close} />
      <FlexView padding={['3xl', '0', '0', '0']} style={[{ backgroundColor: Theme['bg-100'] }]}>
        <AccountPill
          address={address}
          profileName={identity?.name}
          profileImage={identity?.avatar}
          onPress={onProfilePress}
          style={styles.accountPill}
        />
        <AccountWalletFeatures />
      </FlexView>
    </ScrollView>
  );
}