#!/usr/bin/env bash

#bootstrap a ts react-native project on mac

PROJECT_NAME=$1
react-native init --version 0.56.0 $PROJECT_NAME
cd $PROJECT_NAME

echo "installing typescript"
yarn add --dev typescript

echo "installing react-native-typescript-transformer"
yarn add --dev react-native-typescript-transformer

echo "creating ts config file"
#create ts config file
yarn tsc --init --pretty --jsx react

echo "creating rn-cli.config.js"
touch rn-cli.config.js

# not sure if this is needed
yarn add --dev @types/react @types/react-native

# could be replaced with perl
echo "uncommenting allowSyntheticDefaultImports in tsconfig.json file"
sed 's/.*"allowSyntheticDefaultImports": true.*/    "allowSyntheticDefaultImports": true,/' tsconfig.json > \
/tmp/replacedTextTmp && cat /tmp/replacedTextTmp > tsconfig.json && \
rm /tmp/replacedTextTmp

echo "writing here document to rn-cli.config.js file"
cat << EOF > ./rn-cli.config.js
module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};
EOF

#rename js files to use tsx extention
echo "renaming App.jsx to use .tsx extention"
mv App.js App.tsx
# cd __tests__
# mv App.jsx App.tsx
# cd ..

# remove app.js import and add ts compatible imports, could be replace with perl
echo "removing: import React, { Component } from 'react'; from App.tsx file"

perl -i -0pe 's/import React, {Component} from .*react.*;//' App.tsx

TMP_APP_TSX_FILE=$(cat App.tsx)
echo "adding new TS compatible import syntax to App.tsx"
cat << EOF > App.tsx
import React from 'react'
import { Component } from 'react';
${TMP_APP_TSX_FILE}
EOF

#jest ts
echo "installing TS jest"
yarn add --dev ts-jest

#replace
echo "replacing default jest settings in package.json with TS settings using perl"
#store here doc ts settings in variable

# read -r -d '' JEST_TS_SETTINGS_VAR <<-'EOF'
cat <<- EOF > /tmp/jestTsSettingsTemp
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\\\.(js)$": "<rootDir>/node_modules/babel-jest",
      "\\\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\\\.(test|spec))\\\\.(ts|tsx|js)$",
    "testPathIgnorePatterns": [
      "\\\\.snap$",
      "<rootDir>/node_modules/"
    ],
    "cacheDirectory": ".jest/cache"
  }
}
EOF

JEST_TS_SETTINGS_VAR=$(cat /tmp/jestTsSettingsTemp)

# replace following pattern/file in place using peal
# "jest": {
#    "preset": "react-native"
#  }
#  }

perl -i -0pe 's/"jest": {(.*\n){4}//' package.json

# append ts settings to package.json file
echo "${JEST_TS_SETTINGS_VAR}" >> package.json
rm /tmp/jestTsSettingsTemp

#react shapshot testing
echo "installing react-addons-test-utils for snapshot testing"
yarn add --dev react-addons-test-utils

# Installing Type Declaration Dependencies
echo "installing TS type Declaration files"
yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer

echo "creating components directory"
mkdir ./components/

echo "creating Hello.tsx demo component"

cat << EOF > ./components/Hello.tsx
// components/Hello.tsx
import React from "react"
import { Button, StyleSheet, Text, View } from "react-native"

export interface Props {
  name: string
  enthusiasmLevel?: number
  onIncrement?: () => void
  onDecrement?: () => void
}

interface State {
  enthusiasmLevel: number
}

export class Hello extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)

    if ((props.enthusiasmLevel || 0) <= 0) {
      throw new Error("You could be a little more enthusiastic. :D")
    }

    this.state = {
      enthusiasmLevel: props.enthusiasmLevel || 1
    }
  }

  onIncrement = () => this.setState({ enthusiasmLevel: this.state.enthusiasmLevel + 1 });
  onDecrement = () => this.setState({ enthusiasmLevel: this.state.enthusiasmLevel - 1 });
  getExclamationMarks = (numChars: number) => Array(numChars + 1).join("!")

  render() {
    return (
      <View style={styles.root}>
        <Text style={styles.greeting}>
          Hello {this.props.name + this.getExclamationMarks(this.state.enthusiasmLevel)}
        </Text>

        <View style={styles.buttons}>
          <View style={styles.button}>
            <Button
              title="-"
              onPress={this.onDecrement}
              accessibilityLabel="decrement"
              color="red"
            />
          </View>

          <View style={styles.button}>
            <Button
              title="+"
              onPress={this.onIncrement}
              accessibilityLabel="increment"
              color="blue"
            />
          </View>
        </View>
      </View>
    )
  }
}

// styles

const styles = StyleSheet.create({
  root: {
    alignItems: "center",
    alignSelf: "center"
  },
  buttons: {
    flexDirection: "row",
    minHeight: 70,
    alignItems: "stretch",
    alignSelf: "center",
    borderWidth: 5
  },
  button: {
    flex: 1,
    paddingVertical: 0
  },
  greeting: {
    color: "#999",
    fontWeight: "bold"
  }
})
EOF

mkdir ./components/__tests__
cat << EOF > ./components/__tests__/Hello.tsx
import React from 'react'
import renderer from 'react-test-renderer'

import { Hello } from "../Hello"

it("renders correctly with defaults", () => {
  const button = renderer.create(<Hello name="World" enthusiasmLevel={1} />).toJSON()
  expect(button).toMatchSnapshot()
})
EOF

echo "creating git ignore file"
touch .gitignore
cat << EOF > .gitignore
# Jest
#
.jest/
node_modules/
EOF

echo "initializing git"
git init
git add .gitignore # import to do this first, to ignore our files
git add .
git commit -am "Initial commit."

echo "" #simulate carriage return
echo "react-native typescript project ready at $(pwd)"