text: import React from "react";
  import {
    ScrollView,
    StyleSheet,
    Dimensions,
    TouchableOpacity
  } from "react-native";
  // Galio components
  import { Block, Text, Button as GaButton, theme } from "galio-framework";
  // Argon themed components
  import { argonTheme, tabs } from "../constants/";
  import { Button, Select, Icon, Input, Header, Switch } from "../components/";
  import Axios from "axios";
  
  const { width } = Dimensions.get("screen");
  
  class Elements extends React.Component {
    state = {
      "switch-1": true,
      "switch-2": false
    };
  
    toggleSwitch = switchId =>
      this.setState({ [switchId]: !this.state[switchId] });
  
    renderButtons = () => {
      return (
        <Block flex>
          <Text bold size={16} style={styles.title}>
            Controller
          </Text>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Block center>
              <Button
                color="secondary"
                textStyle={{ color: "black", fontSize: 12, fontWeight: "700" }}
                style={styles.button}
                onPressIn={() => {
                  Axios.get("http://raspberrypi.local:3000/gpio/forward")
                    .then(resp => {
                      console.log("resp.data");
                      console.log(resp.data);
                      console.log("resp.status");
                      console.log(resp.status);
                    })
                    .catch(err => console.log(err));
                }}
                onPressOut={() => {
                  Axios.get("http://raspberrypi.local:3000/gpio/stop")
                    .then(resp => {
                      console.log("resp.data");
                      console.log(resp.data);
                      console.log("resp.status");
                      console.log(resp.status);
                    })
                    .catch(err => console.log(err));
                }}
              >
                Forward
              </Button>
            </Block>
            <Block center>
              <Button
                style={styles.button}
                onPressIn={() => {
                  Axios.get("http://raspberrypi.local:3000/gpio/back")
                    .then(resp => {
                      console.log("resp.data");
                      console.log(resp.data);
                      console.log("resp.status");
                      console.log(resp.status);
                    })
                    .catch(err => console.log(err));
                }}
                onPressOut={() => {
                  Axios.get("http://raspberrypi.local:3000/gpio/stop")
                    .then(resp => {
                      console.log("resp.data");
                      console.log(resp.data);
                      console.log("resp.status");
                      console.log(resp.status);
                    })
                    .catch(err => console.log(err));
                }}
              >
                Back
              </Button>
            </Block>
          </Block>
        </Block>
      );
    };
  
    renderText = () => {
      return (
        <Block flex style={styles.group}>
          <Text bold size={16} style={styles.title}>
            Control the Buggy from here
          </Text>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Text
              h1
              style={{ marginBottom: theme.SIZES.BASE / 2 }}
              color={argonTheme.COLORS.DEFAULT}
            >
              Heading 1
            </Text>
            <Text
              h2
              style={{ marginBottom: theme.SIZES.BASE / 2 }}
              color={argonTheme.COLORS.DEFAULT}
            >
              Heading 2
            </Text>
            <Text
              h3
              style={{ marginBottom: theme.SIZES.BASE / 2 }}
              color={argonTheme.COLORS.DEFAULT}
            >
              Heading 3
            </Text>
            <Text
              h4
              style={{ marginBottom: theme.SIZES.BASE / 2 }}
              color={argonTheme.COLORS.DEFAULT}
            >
              Heading 4
            </Text>
            <Text
              h5
              style={{ marginBottom: theme.SIZES.BASE / 2 }}
              color={argonTheme.COLORS.DEFAULT}
            >
              Heading 5
            </Text>
            <Text
              p
              style={{ marginBottom: theme.SIZES.BASE / 2 }}
              color={argonTheme.COLORS.DEFAULT}
            >
              Paragraph
            </Text>
            <Text muted>This is a muted paragraph.</Text>
          </Block>
        </Block>
      );
    };
  
    renderInputs = () => {
      return (
        <Block flex style={styles.group}>
          <Text bold size={16} style={styles.title}>
            Inputs
          </Text>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input right placeholder="Regular" iconContent={<Block />} />
          </Block>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input
              right
              placeholder="Regular Custom"
              style={{
                borderColor: argonTheme.COLORS.INFO,
                borderRadius: 4,
                backgroundColor: "#fff"
              }}
              iconContent={<Block />}
            />
          </Block>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input
              placeholder="Icon left"
              iconContent={
                <Icon
                  size={11}
                  style={{ marginRight: 10 }}
                  color={argonTheme.COLORS.ICON}
                  name="search-zoom-in"
                  family="ArgonExtra"
                />
              }
            />
          </Block>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input
              right
              placeholder="Icon Right"
              iconContent={
                <Icon
                  size={11}
                  color={argonTheme.COLORS.ICON}
                  name="search-zoom-in"
                  family="ArgonExtra"
                />
              }
            />
          </Block>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input
              success
              right
              placeholder="Success"
              iconContent={
                <Block
                  middle
                  style={{
                    width: 20,
                    height: 20,
                    borderRadius: 10,
                    backgroundColor: argonTheme.COLORS.INPUT_SUCCESS
                  }}
                >
                  <Icon
                    size={11}
                    color={argonTheme.COLORS.ICON}
                    name="g-check"
                    family="ArgonExtra"
                  />
                </Block>
              }
            />
          </Block>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input
              error
              right
              placeholder="Error Input"
              iconContent={
                <Block
                  middle
                  style={{
                    width: 20,
                    height: 20,
                    borderRadius: 10,
                    backgroundColor: argonTheme.COLORS.INPUT_ERROR
                  }}
                >
                  <Icon
                    size={11}
                    color={argonTheme.COLORS.ICON}
                    name="support"
                    family="ArgonExtra"
                  />
                </Block>
              }
            />
          </Block>
        </Block>
      );
    };
  
    renderSwitches = () => {
      return (
        <Block flex style={styles.group}>
          <Text bold size={16} style={styles.title}>
            Switches
          </Text>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Block
              row
              middle
              space="between"
              style={{ marginBottom: theme.SIZES.BASE }}
            >
              <Text size={14}>Switch is ON</Text>
              <Switch
                value={this.state["switch-1"]}
                onValueChange={() => this.toggleSwitch("switch-1")}
              />
            </Block>
            <Block row middle space="between">
              <Text size={14}>Switch is OFF</Text>
              <Switch
                value={this.state["switch-2"]}
                onValueChange={() => this.toggleSwitch("switch-2")}
              />
            </Block>
          </Block>
        </Block>
      );
    };
  
    renderTableCell = () => {
      const { navigation } = this.props;
      return (
        <Block flex style={styles.group}>
          <Text bold size={16} style={styles.title}>
            Table Cell
          </Text>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Block style={styles.rows}>
              <TouchableOpacity onPress={() => navigation.navigate("Pro")}>
                <Block row middle space="between" style={{ paddingTop: 7 }}>
                  <Text size={14}>Manage Options</Text>
                  <Icon
                    name="chevron-right"
                    family="entypo"
                    style={{ paddingRight: 5 }}
                  />
                </Block>
              </TouchableOpacity>
            </Block>
          </Block>
        </Block>
      );
    };
  
    renderSocial = () => {
      return (
        <Block flex style={styles.group}>
          <Text bold size={16} style={styles.title}>
            Social
          </Text>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Block row center space="between">
              <Block flex middle right>
                <GaButton
                  round
                  onlyIcon
                  shadowless
                  icon="facebook"
                  iconFamily="Font-Awesome"
                  iconColor={theme.COLORS.WHITE}
                  iconSize={theme.SIZES.BASE * 1.625}
                  color={theme.COLORS.FACEBOOK}
                  style={[styles.social, styles.shadow]}
                />
              </Block>
              <Block flex middle center>
                <GaButton
                  round
                  onlyIcon
                  shadowless
                  icon="twitter"
                  iconFamily="Font-Awesome"
                  iconColor={theme.COLORS.WHITE}
                  iconSize={theme.SIZES.BASE * 1.625}
                  color={theme.COLORS.TWITTER}
                  style={[styles.social, styles.shadow]}
                />
              </Block>
              <Block flex middle left>
                <GaButton
                  round
                  onlyIcon
                  shadowless
                  icon="dribbble"
                  iconFamily="Font-Awesome"
                  iconColor={theme.COLORS.WHITE}
                  iconSize={theme.SIZES.BASE * 1.625}
                  color={theme.COLORS.DRIBBBLE}
                  style={[styles.social, styles.shadow]}
                />
              </Block>
            </Block>
          </Block>
        </Block>
      );
    };
  
    renderNavigation = () => {
      return (
        <Block flex style={styles.group}>
          <Text bold size={16} style={styles.title}>
            Navigation
          </Text>
          <Block>
            <Block style={{ marginBottom: theme.SIZES.BASE }}>
              <Header back title="Title" navigation={this.props.navigation} />
            </Block>
  
            <Block style={{ marginBottom: theme.SIZES.BASE }}>
              <Header
                white
                back
                title="Title"
                navigation={this.props.navigation}
                bgColor={argonTheme.COLORS.ACTIVE}
                titleColor="white"
                iconColor="white"
              />
            </Block>
  
            <Block style={{ marginBottom: theme.SIZES.BASE }}>
              <Header search title="Title" navigation={this.props.navigation} />
            </Block>
  
            <Block style={{ marginBottom: theme.SIZES.BASE }}>
              <Header
                tabs={tabs.categories}
                search
                title="Title"
                navigation={this.props.navigation}
              />
            </Block>
  
            <Block style={{ marginBottom: theme.SIZES.BASE }}>
              <Header
                options
                search
                title="Title"
                optionLeft="Option 1"
                optionRight="Option 2"
                navigation={this.props.navigation}
              />
            </Block>
          </Block>
        </Block>
      );
    };
  
    render() {
      return (
        <Block flex center>
          <ScrollView
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{ paddingBottom: 30 }}
          >
            {this.renderButtons()}
            {this.renderText()}
            {this.renderInputs()}
            {this.renderSocial()}
            {this.renderSwitches()}
            {this.renderNavigation()}
            {this.renderTableCell()}
          </ScrollView>
        </Block>
      );
    }
  }
  
  const styles = StyleSheet.create({
    title: {
      paddingBottom: theme.SIZES.BASE,
      paddingHorizontal: theme.SIZES.BASE * 2,
      marginTop: 44,
      color: argonTheme.COLORS.HEADER
    },
    group: {
      paddingTop: theme.SIZES.BASE * 2
    },
    shadow: {
      shadowColor: "black",
      shadowOffset: { width: 0, height: 2 },
      shadowRadius: 4,
      shadowOpacity: 0.2,
      elevation: 2
    },
    button: {
      marginBottom: theme.SIZES.BASE,
      width: width - theme.SIZES.BASE * 2
    },
    optionsButton: {
      width: "auto",
      height: 34,
      paddingHorizontal: theme.SIZES.BASE,
      paddingVertical: 10
    },
    input: {
      borderBottomWidth: 1
    },
    inputDefault: {
      borderBottomColor: argonTheme.COLORS.PLACEHOLDER
    },
    inputTheme: {
      borderBottomColor: argonTheme.COLORS.PRIMARY
    },
    inputTheme: {
      borderBottomColor: argonTheme.COLORS.PRIMARY
    },
    inputInfo: {
      borderBottomColor: argonTheme.COLORS.INFO
    },
    inputSuccess: {
      borderBottomColor: argonTheme.COLORS.SUCCESS
    },
    inputWarning: {
      borderBottomColor: argonTheme.COLORS.WARNING
    },
    inputDanger: {
      borderBottomColor: argonTheme.COLORS.ERROR
    },
    social: {
      width: theme.SIZES.BASE * 3.5,
      height: theme.SIZES.BASE * 3.5,
      borderRadius: theme.SIZES.BASE * 1.75,
      justifyContent: "center"
    }
  });
  
  export default Elements;
  