import React, { useEffect, useState } from "react";
import {
  Text,
  View,
  Button,
  TouchableOpacity,
  Image,
  ImageBackground
} from "react-native";
import styled from "styled-components/native";

import getRandomPoint from "../helpers/getRandomPoint";
import { noColor } from "../helpers/config";

const Home = () => {
  const [point, setPoint] = useState({
    meridian: "Meridian",
    pointNumber: "Point",
    colorHex: noColor
  });

  // const [isReady, setIsReady] = useState(false);

  function handleTouch() {
    let newPoint = getRandomPoint();
    setPoint(newPoint);
  }

  // Views style
  const TitleView = styled.View`
    flex: 2;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    margin-right: 15;
    margin-left: 5;
  `;

  const LogoView = styled.View`
    flex: 0.8;
    margin-right: 15;
  `;

  const TitleTextView = styled.View`
    flex: 3;
  `;

  const PointView = styled.View`
    flex: 2;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    background-color: ${point.colorHex};
  `;

  const ButtonView = styled.View`
    flex: 2;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
  `;

  // Texts style
  const TitleText = styled.Text`
    color: black;
    font-size: 20;
    font-weight: 500;
    text-transform: uppercase;
    /* // font-family: "futura-std-medium"; */
  `;

  const PointText = styled.Text`
    font-size: 40;
    font-weight: 600;
    color: black;
  `;

  // Button style
  const TouchButton = styled.TouchableOpacity`
    align-items: center;
    justify-content: center;
  `;

  return (
    <ImageBackground
      style={{ width: "100%", height: "100%", resizeMode: "contain" }}
      source={require("../assets/images/scroll-texture.jpg")}
    >
      <TitleView>
        <LogoView>
          <Image
            style={{ width: 70, height: 70 }}
            source={require("../assets/images/5E-logo-transparent.png")}
          />
        </LogoView>
        <TitleTextView>
          <TitleText>5 Element Acupuncture Points Generator</TitleText>
        </TitleTextView>
      </TitleView>
      <PointView>
        <PointText>{point.meridian}</PointText>
        <PointText>{point.pointNumber}</PointText>
      </PointView>
      <ButtonView>
        <TouchButton onPress={() => handleTouch()}>
          <Image
            style={{ width: 100, height: 100 }}
            source={require("../assets/images/enso.png")}
          />
        </TouchButton>
      </ButtonView>
    </ImageBackground>
  );
};

export default Home;