import { h, Component } from "preact";
import SolutionStep from "./SolutionStep";
import { REGEX_NO_NEW_LINE_CHARS } from "../utils/utils";
import {
	RGX_SPLIT_STEPS,
} from './../utils/regex';
import SolutionSubpart from "./SolutionSubpart";
import {
	separateConfigStringIntoFactStrings,
	extractPredicateNameAndArgumentsFromFactString,
	extraString,
} from "../utils/utils";
import { getTablesFromFactStrings, getListOfTableComponents } from "./Config";
import { getTableInfoFromFactString  } from "../utils/tableParser";
import { extractEvaluationExpression } from "../utils/evaluation-expression";
import LHS_RHS from "./LHS_RHS/LHS_RHS";
import Table from "./Table";
import {formatGraphData} from './../utils/graph';
import Graph from './../components/Geometry/Graph';
import NumberLine from './../components/Geometry/Numberline';
class Solution extends Component {
	splitSolutionStringIntoSteps(rawString) {
		const lines = [];
		const arrayOfLines = rawString.match(REGEX_NO_NEW_LINE_CHARS);
		if (!arrayOfLines || !arrayOfLines.length) {
			return [];
		}
		lines.push(arrayOfLines[0] + "\n");
		let index = 0;
		for (let i = 1; i < arrayOfLines.length; i++) {
			const lineElement = arrayOfLines[i].replace(/^\s+|\s+$/g, "");
			if (lineElement.startsWith("=")) {
				lines[index] = lines[index] + lineElement + "\n";
			} else {
				lines[index] = lines[index].replace(/^\s+|\s+$/g, "");
				index++;
				lines[index] = lineElement;
			}
		}
		lines[index] = lines[index].replace(/^\s+|\s+$/g, "");
		return lines;
	}
	getSolutionStepComponents(rawStringSteps) {
		const { subpartIndexString } = this.props;
		return rawStringSteps.map((stepString, index) => {
			return (
				<SolutionStep
					stringWithLines={stepString}
					subpartIndexString={subpartIndexString}
					stepNumber={index + 1}
				/>
			);
		});
	}
	getSolutionSubparts() {
		const { subparts } = this.props;
		if (!subparts) {
			return [];
		}
		return subparts.map((subpart, index) => (
			<SolutionSubpart index={index} text={subpart.solutionString} />
		));
	}
	getSolutionStepFromFactString(factString) {
		const {
			predicate,
			argumentsString
		} = extractPredicateNameAndArgumentsFromFactString(factString);
		switch(predicate){
			case "matrix_solution":
				const rawStringSteps = this.splitSolutionStringIntoSteps(
					argumentsString
				);
				const solutionSteps = this.getSolutionStepComponents(
					rawStringSteps
				);
				return solutionSteps;
			case "table":
				const tableInfo = getTableInfoFromFactString(factString);
				return <Table table={tableInfo} />;
			case "evaluation_expression":
				const lhs_rhs = extractEvaluationExpression(factString);
				return <LHS_RHS lhs_rhs={lhs_rhs} />;
			case "string":
				const str = extraString(`string(${argumentsString})`)
				return <span>{str}</span>
			case "graph":
				const graphSteps = argumentsString.split(RGX_SPLIT_STEPS);
				const formattedData = formatGraphData(graphSteps);
				return <Graph data={formattedData.data}/>
			case "numberline":
				return <NumberLine argumentsString={argumentsString}/>
			case "sequence_difference_underneath":
				return <SequenceWithDifferenceUnderneath argumentsString = {argumentsString} />
			default :
				return <div />;
		}
	}
	splitSolutionStringIntoParts() {
		const { rawString } = this.props;
		if (!rawString) {
			return "";
		}
		const factStrings = separateConfigStringIntoFactStrings(rawString);
		return factStrings.map(this.getSolutionStepFromFactString.bind(this));
	}
	render() {
		const solutionParts = this.splitSolutionStringIntoParts();
		return (
			<div>
				<div className="solution">{solutionParts}</div>
				<div>{this.getSolutionSubparts()}</div>
			</div>
		);
	}
}

export default Solution;