import React, { useState, useEffect } from "react";
import {
  CssBaseline,
  Container,
  Typography,
  TextField
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8), // = 4 * 2
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  }
}));

function App() {
  const classes = useStyles();
  const [currentTarget, setCurrentTarget] = useState(null);
  const [hourlyRate, setHourlyRate] = useState(10);
  const [workHour, setWorkHour] = useState(40);
  const [weeklyRate, setWeeklyRate] = useState(400);
  const [monthlyRate, setMonthlyRate] = useState(1600);
  const [yearlyRate, setYearlyRate] = useState(19200);

  useEffect(() => {
    tryConvert(currentTarget);
  }, [
    hourlyRate,
    workHour,
    weeklyRate,
    monthlyRate,
    yearlyRate
  ]);

  const tryConvert = name => {
    if (name === "work-hours") {
      setWorkHour(workHour);
      setWeeklyRate(workHour * hourlyRate);
      setMonthlyRate(workHour * hourlyRate * 4);
      setYearlyRate(workHour * hourlyRate * 4 * 12);
    } else if (name === "hourly-rate") {
      setHourlyRate(hourlyRate);
      setWeeklyRate(hourlyRate * workHour);
      setMonthlyRate(hourlyRate * workHour * 4);
      setYearlyRate(hourlyRate * workHour * 4 * 12);
    } else if (name === "weekly-rate") {
      setWeeklyRate(weeklyRate);
      setHourlyRate(weeklyRate / workHour);
      setMonthlyRate(weeklyRate * 4);
      setYearlyRate(weeklyRate * 4 * 12);
    } else if (name === "monthly-rate") {
      setMonthlyRate(monthlyRate);
      setWeeklyRate(monthlyRate / 4);
      setHourlyRate(monthlyRate / workHour / 4);
      setYearlyRate(monthlyRate * 12);
    } else if (name === "yearly-rate") {
      setYearlyRate(yearlyRate);
      setMonthlyRate(yearlyRate / 12);
      setWeeklyRate(yearlyRate / 12 / 4);
      setHourlyRate(yearlyRate / 12 / 4 / workHour);
    }
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Rate Kalkulator
        </Typography>
        <TextField
          variant="outlined"
          margin="normal"
          id="hourly-rate"
          label="Hourly Rate"
          name="hourly-rate"
          autoFocus
          inputProps={{ "data-testid": "hourly-rate" }}
          value={hourlyRate ? hourlyRate : 0}
          onChange={event => {
            setHourlyRate(event.target.value);
            setCurrentTarget("hourly-rate");
          }}
        />
        <TextField
          variant="outlined"
          margin="normal"
          id="work-hours"
          label="Work Hours"
          name="work-hours"
          inputProps={{ "data-testid": "work-hours" }}
          value={workHour}
          onChange={event => {
            setWorkHour(event.target.value);
            setCurrentTarget("work-hours");
          }}
        />
        <TextField
          variant="outlined"
          margin="normal"
          id="weekly-rate"
          label="Weekly Rate"
          name="weekly-rate"
          inputProps={{ "data-testid": "weekly-rate" }}
          value={weeklyRate ? weeklyRate : 0}
          onChange={event => {
            setWeeklyRate(event.target.value);
            setCurrentTarget("weekly-rate");
          }}
        />
        <TextField
          variant="outlined"
          margin="normal"
          id="monthly-rate"
          label="Monthly Rate"
          name="monthly-rate"
          inputProps={{ "data-testid": "monthly-rate" }}
          value={monthlyRate ? monthlyRate : 0}
          onChange={event => {
            setMonthlyRate(event.target.value);
            setCurrentTarget("monthly-rate");
          }}
        />
        <TextField
          variant="outlined"
          margin="normal"
          id="yearly-rate"
          label="Yearly Rate"
          name="yearly-rate"
          inputProps={{ "data-testid": "yearly-rate" }}
          value={yearlyRate ? yearlyRate : 0}
          onChange={event => {
            setYearlyRate(event.target.value);
            setCurrentTarget("yearly-rate");
          }}
        />
      </div>
    </Container>
  );
}