RouxScanner

class RouxScanner extends Component<RouxScannerProps, RouxScannerState> {
  state = {
    v2ScanningMode: true,
    scanSize: 0.001, // scan size in mm or meters pending on scanning mode
    scanState: 'preview',
    loading: true,
  }
  constructor(props: Readonly<RouxScannerProps>) {
    super(props)
  }

  setupPreview = async () => {
    try {
      await this.setState({scanState: 'preview', loading: true})
      await Roux.toggleV2Scanning(this.state.v2ScanningMode)
      await Roux.initializeScanner()
      await Roux.startPreview()
      await this.doneLoading()
    } catch (err) {
      console.warn(err)
    }
  }

  doneLoading = () => {
    setTimeout(() => {
      this.setState({loading: false})
    }, 800)
  }

  async onScannerStop() {
    try {
      await Roux.generateMesh().then(this.onMeshLoaded)
    } catch (err) {
      console.warn(err)
    }
  }

  createFileName(firstName: string, lastName: string, braceName: string) {
    const formattedFirstName = firstName
      .trim()
      .replace('.', '')
      .replace('_', '')
    const formattedLastName = lastName
      .trim()
      .replace('.', '')
      .replace('_', '')
    const formattedBraceName = braceName.trim().replace('.', '')

    return `${formattedFirstName}_${formattedLastName}_${formattedBraceName}_${DateTime.local()}.stl`
  }

  async discardScan() {
    this.setState({loading: true})

    try {
      const dirPath = `${RNFS.DocumentDirectoryPath}/AbleHands/Scans`
      const fileName = `${dirPath}/TEMP.ply`
  
      await RNFS.mkdir(dirPath)
      await Roux.saveScan(fileName)
      await RNFS.unlink(fileName)
      
    } catch(err) {
      console.log(err)
    }

    this.setupPreview()
  }

  async saveScan() {
    const {
      firstName,
      lastName,
      braceName,
      checkScanFolder,
      returnToCollectInfo,
      handleClearBraceName,
    } = this.props

    try {
      const dirPath = `${RNFS.DocumentDirectoryPath}/AbleHands/Scans`
      const filePath = `${dirPath}/${this.createFileName(
        firstName,
        lastName,
        braceName
      )}`

      await RNFS.mkdir(dirPath)
      await Roux.saveScan(filePath)

      Alert.alert('File Saved Successfully')
      checkScanFolder()
      returnToCollectInfo()
    } catch (err) {
      console.warn(err)
    }
  }

  startScan = () => {
    this.props.startScanningAudio()
    this.setState({scanState: 'scan'})
    Roux.startScan()
  }

  stopScan = () => {
    this.props.stopScanningAudio()
    this.setState({scanState: 'confirm', loading: true})
    Roux.stopScan()
  }

  SCANNER_ACTIONS: any = {
    preview: {
      action: this.startScan,
      indicator: () => (
        <View style={Scanner.confirmActions}>
          <TouchableOpacity
            style={[Scanner.confirmButton, {zIndex: 1}]}
            onPress={this.props.returnToCollectInfo}>
            <Feather size={24} color={colors.warning} name="arrow-left" />
            <Text style={{color: colors.warning}}>Back</Text>
          </TouchableOpacity>
          <View style={Scanner.confirmButton}>
            <Feather size={24} color={colors.success} name="play" />
            <Text style={{color: colors.success}}>Start</Text>
          </View>
        </View>
      ),
    },
    scan: {
      action: this.stopScan,
      indicator: () => (
        <View style={Scanner.scannerActions}>
          <Feather size={24} color={colors.alert} name="square" />
          <Text style={{color: colors.alert}}>Stop</Text>
        </View>
      ),
    },
    confirm: {
      action: () => {},
      indicator: () => (
        <View style={Scanner.confirmActions}>
          <TouchableOpacity
            style={Scanner.confirmButton}
            onPress={() => this.discardScan()}>
            <Feather size={24} color={colors.alert} name="trash" />
            <Text style={{color: colors.alert}}>Discard</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={Scanner.confirmButton}
            onPress={() => {
              this.saveScan()
            }}>
            <Feather size={24} color={colors.success} name="save" />
            <Text style={{color: colors.success}}>Save</Text>
          </TouchableOpacity>
        </View>
      ),
    },
  }

  shortenField = (field: string) =>
    field.length > 10 ? `${field.slice(0, 10)}...` : field

  scanInformation = () => {
    return (
      <View style={[Scanner.row, Scanner.infoContainer]}>
        <View style={Scanner.confirmActions}>
          <View style={Scanner.infoFirstName}>
            <Text style={Scanner.infoLabel}>First Name</Text>
            <Text style={Scanner.infoText}>
              {this.shortenField(this.props.firstName)}
            </Text>
          </View>
          <View style={Scanner.infoLastName}>
            <Text style={Scanner.infoLabel}>Last Name</Text>
            <Text style={Scanner.infoText}>
              {this.shortenField(this.props.lastName)}
            </Text>
          </View>
          <View style={Scanner.infoBraceName}>
            <Text style={Scanner.infoLabel}>Brace Name</Text>
            <Text style={Scanner.infoText}>
              {this.shortenField(this.props.braceName)}
            </Text>
          </View>
        </View>
      </View>
    )
  }

  loadingIndicator = () => {
    return (
      <View style={Scanner.loadingIndicatorPosition}>
        <ActivityIndicator size="large" color="#00ff00" />
      </View>
    )
  }

  render() {
    const maybeInvert = Scanner.maybeInvert(
      Scanner.container,
      this.state.scanState,
      this.props.airServerMode
    )
    console.log('this is the current time!!!', DateTime.now)
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          this.state.loading ? null : this.SCANNER_ACTIONS[this.state.scanState].action()
        }}
        style={maybeInvert}>
        {this.state.loading && this.loadingIndicator()}
        <RouxView
          onMeshLoaded={this.doneLoading}
          style={Scanner.roux}
          onVisualizerReady={this.setupPreview}
          onScannerStop={this.onScannerStop}
        />
        <View style={maybeInvert}>
          {this.scanInformation()}
          <View style={Scanner.row}>
            {this.state.loading ? this.loadingIndicator() : this.SCANNER_ACTIONS[this.state.scanState].indicator()}
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}