text: /*
   * Copyright (c) Minh Loi.
   *
   * This file is part of Ulangi which is released under GPL v3.0.
   * See LICENSE or go to https://www.gnu.org/licenses/gpl-3.0.txt
   */
  
  import { AtomShellType, Theme } from '@ulangi/ulangi-common/enums';
  import {
    ObservableParticle,
    ObservableScreenLayout,
    ObservableShell,
  } from '@ulangi/ulangi-observable';
  import { observer } from 'mobx-react';
  import * as React from 'react';
  import { StyleSheet, View } from 'react-native';
  
  import { AtomParticle } from './AtomParticle';
  
  export interface AtomParticlesProps {
    theme: Theme;
    screenLayout: ObservableScreenLayout;
    particles: ObservableParticle[];
    getShellByPosition: (position: {
      x: number;
      y: number;
    }) => ObservableShell | undefined;
    transferParticleToSameShell: (
      particle: ObservableParticle,
      position: { x: number; y: number },
      isUserMove: boolean,
    ) => void;
    transferParticleToAnotherShell: (
      particle: ObservableParticle,
      position: { x: number; y: number },
      newShell: AtomShellType,
      isUserMove: boolean,
    ) => void;
    isMaxReached: (shell: AtomShellType) => boolean;
  }
  
  @observer
  export class AtomParticles extends React.Component<AtomParticlesProps> {
    public render(): React.ReactElement<any> {
      return (
        <View style={styles.container}>
          {this.props.particles.map(
            (particle): React.ReactElement<any> => {
              return (
                <AtomParticle
                  key={particle.id}
                  theme={this.props.theme}
                  screenLayout={this.props.screenLayout}
                  particle={particle}
                  getShellByPosition={this.props.getShellByPosition}
                  transferParticleToAnotherShell={
                    this.props.transferParticleToAnotherShell
                  }
                  transferParticleToSameShell={
                    this.props.transferParticleToSameShell
                  }
                  isMaxReached={this.props.isMaxReached}
                />
              );
            },
          )}
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      position: 'absolute',
    },
  });
  