// @flow
import React from "react";
import { Platform, Text } from "react-native";
import styled from "styled-components/native";

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${({ isNightTime }) =>
    isNightTime ? "#959595" : "#F5FCFF"};
`;

const WelcomeText = styled.Text`
  font-size: 20px;
  text-align: center;
  margin: 10px;
  ${({ isNightTime }) => isNightTime && `color: white`};
`;

const InstructionsText = styled(Text)`
  text-align: center;
  margin-bottom: 5px;
  color: ${"#333333"};
`;

type Props = { isNightTime: boolean };
export default (props: Props) => (
  <Container isNightTime={props.isNightTime}>
    <WelcomeText isNightTime={props.isNightTime}>
      Welcome to React Native!
    </WelcomeText>
    <InstructionsText>To get started, edit App.js</InstructionsText>
    <InstructionsText>{instructions}</InstructionsText>
  </Container>
);