const colors = [
  "#FFC313",
  "#FF9813",
  "#FB1223",
  "#E01093",
  "#6621D2",
  "#2B37D4",
  "#198DCC",
  "#10D66C",
  "#45EA11",
  "#BBF812",
];
let i = 0;
function getColor() {
  if (i > colors.length - 1) {
    i = 0;
  }
  let currentColor = colors[i];
  i++;
  return currentColor;
}

function Column(props) {
  const hover = (event) => {
    event.currentTarget.style.opacity = "0.5";
    props.labelRef.current.style.background = props.color;
    props.labelRef.current.style.visibility = "visible";
    props.labelRef.current.style.opacity = "1";
  };

  const hoverLeave = (event) => {
    event.currentTarget.style.opacity = "1";
    props.labelRef.current.style.visibility = "hidden";
    props.labelRef.current.style.opacity = "0";
  };

  return (
    <div
      className="column"
      style={{ height: props.height + "%", background: props.color }}
      onMouseEnter={hover}
      onMouseLeave={hoverLeave}
      onTouchStart={hover}
      onTouchEnd={hoverLeave}
    ></div>
  );
}

function ColumnAndLabel(props) {
  return (
    <div className="column-label">
      <Column
        labelRef={props.labelRef}
        color={getColor()}
        height={100 * (props.frequency / props.maxValue)}
      />
      <div ref={props.labelRef} className="label">
        {/**frequency label visible on hover */}
        {props.frequency}
      </div>
      <span>{props.num}</span> {/**x-axis */}
    </div>
  );
}


function Box(props) {
  return (
    <div className="box">
      <div className="histogram">
        {Object.keys(props.data)
          .sort((a, b) => a - b)
          .map((num, i) => (
            <ColumnAndLabel
              key={"column-label" + num}
              num={num}
              frequency={props.data[num]}
              labelRef={props.labelsRef[i]}
              maxValue={props.maxValue}
            />
          ))}
      </div>
    </div>
  );
}

function Form(props) {
  return (
    <form>
      <h1>Data fetching and visualization</h1>
      <label htmlFor="amount">
        Amount of numbers
        <input
          type="text"
          name="amount"
          id="amount"
          defaultValue="200"
          onInput={props.onInput}
          className={
            props.formInput.amount &&
            !isNaN(props.formInput.amount - "") &&
            props.formInput.amount - "" <= 950
              ? null
              : "error"
          }
        />
      </label>

      <label htmlFor="min">
        Min number
        <input
          type="text"
          name="min"
          id="min-num"
          defaultValue="1"
          onInput={props.onInput}
          className={
            props.formInput.min && !isNaN(props.formInput.min - "")
              ? null
              : "error"
          }
        />
      </label>

      <label htmlFor="max">
        Max number
        <input
          type="text"
          name="max"
          id="max-num"
          defaultValue="10"
          onInput={props.onInput}
          className={
            props.formInput.max &&
            !isNaN(props.formInput.max - "") &&
            props.formInput.max !== props.formInput.min
              ? null
              : "error"
          }
        />
      </label>

      <input
        type="submit"
        value="Submit"
        id="submit"
        onClick={props.onSubmit}
        disabled={
          !props.formInput.amount.length ||
          !props.formInput.min.length ||
          !props.formInput.max.length ||
          isNaN(props.formInput.max - "") ||
          isNaN(props.formInput.min - "") ||
          isNaN(props.formInput.amount - "") ||
          props.formInput.max === props.formInput.min ||
          props.formInput.amount - "" > 950
        }
      />
    </form>
  );
}

class App extends React.Component {
  state = {
    data: {},
    labelsRef: [],
    formInput: {
      min: "1",
      max: "10",
      amount: "200",
    },
  };

  getData = (e) => {
    e.preventDefault();

    const amount = this.state.formInput.amount;
    const min = this.state.formInput.min;
    const max = this.state.formInput.max;
    const url = `https://www.random.org/integers/?num=${amount}&min=${min}&max=${max}&col=1&base=10&format=plain&rnd=new`;

    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status}`);
        }
        return response.text();
      })
      .then((result) => {
        let data = this.state.data;
        let labelsRef = this.state.labelsRef;
        data = {};
        labelsRef = [];

        result
          .split("\n")
          .filter((num) => num !== "")
          .forEach((num) => {
            if (num in data) {
              data[num]++;
            } else {
              data[num] = 1;
            }
          });

        for (let i = 0; i < Object.keys(data).length; i++) {
          labelsRef.push(React.createRef());
        }

        this.setState({ data, labelsRef });
      })
      .catch((error) => console.log("Error: " + error));
  };

  formInputs = (event) => {
    const value = event.currentTarget.value;
    let formInput = this.state.formInput;

    if (event.currentTarget.id === "amount") {
      formInput.amount = value;
    } else if (event.currentTarget.id === "min-num") {
      formInput.min = value;
    } else {
      formInput.max = value;
    }
    this.setState({ formInput });
  };
  reset = () => {
    this.setState({
      data: {},
      formInput: {
        min: "1",
        max: "10",
        amount: "200",
      },
    });
  };

  render() {
    if (Object.keys(this.state.data).length) {
      let maxValue = Math.max(...Object.values(this.state.data));
      let yAxis = [];
      maxValue = Number.isInteger(maxValue / 10)
        ? maxValue
        : Math.trunc((maxValue + 10) / 10) * 10;

      if (maxValue > 10) {
        for (let i = 10; i < maxValue; i += 10) {
          yAxis.push(<span key={i}>{i}</span>);
        }
      } else {
        yAxis.push(<span key="5">5</span>);
      }

      return [
        <div key="y-axis" className="y-axis">
          {yAxis}
        </div>,
        <Box
          key="box-histogram"
          data={this.state.data}
          labelsRef={this.state.labelsRef}
          maxValue={maxValue}
        />,
        <div key="reset" className="reset" onClick={this.reset}>
          <img src="https://img.icons8.com/ios-glyphs/30/null/reboot.png" />
        </div>,
      ];
    } else {
      return (
        <Form
          formInput={this.state.formInput}
          onInput={this.formInputs}
          onSubmit={this.getData}
        />
      );
    }
  }
}

ReactDOM.render(<App />, document.getElementById("app"));