import React, { useState } from 'react';
import FluentDisplayNumbers from '../../widgets/FluentComponents/atoms/FluentDisplayNumbers';
import { makeStyles, Typography } from '@material-ui/core';
import { LayoutUnit } from '../../../layout/LayoutUnit';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        justifyContent: 'center',
        // flexDirection: 'column',
    },
    wrapper: {
        display: 'flex',
        flexDirection: 'row',
        // justifyContent: 'center',
        height: 150,
        color: theme.palette.secondary.main
    }
}), { next: 'RadioVisualization' });
export const RatioVisulization = ({ title, n, m }) => {
    const [val, setVal] = useState();
    const classes = useStyles();
    // In the ratio m : n, the quantities (numbers) m and n are called the terms of the ratio. 
    // The first term (i.e. m) is called antecedent and the second term (i.e. is n) is called consequent.
    // 15/25 = (15 ÷ 5)/(25 ÷ 5) = 3/5
    function number_test(n) {
        const result = (n - Math.floor(n)) !== 0;
        if (result)
            return false;
        else
            return true;
    }
    console.log(number_test(10));
    const loopReduceRatio = (n, m) => {
        let i = 0;
        let options = [];
        let test = [];
        while (i < 9) {
            const ren = test.length + 1;
            const nr = n / ren;
            const mr = m / ren;
            test.push(nr);
            number_test(nr) && number_test(mr) && options.push(nr, mr);
            i++;
            let commonN = [];
            let commonM = [];
            const nVal = options.map((item => {
                return commonN.push(n / item);
            }));
            const mVal = options.map((item => {
                return commonM.push(m / item);
            }));
            // setVal(nVal)
            // commonN.push(nVal)
            // commonM.push(mVal)
            const intersection = commonN.filter(element => commonM.includes(element));
            console.log('options', intersection);
            const intersectionT = intersection.filter(function (item) {
                return item !== 1;
            });
            setVal(intersectionT);
        }
    };
    //  console.log('RATIO:' , loopReduceRatio(15, 25))
    return (React.createElement("div", { className: classes.root }, React.createElement("div", null, val && val.map((item => {
        return (item);
    }))), React.createElement("div", null, React.createElement(Typography, { variant: "subtitle2" }, " Student to Teature Ratio "), React.createElement(LayoutUnit, { unit: "xs" }), React.createElement("div", { className: classes.wrapper }, React.createElement(FluentDisplayNumbers, { number: n, label: "Teacher" }), React.createElement(FluentDisplayNumbers, { number: ":" }), React.createElement(FluentDisplayNumbers, { number: m, label: "Students" })))));
};
//# sourceMappingURL=RatioVisulization.js.map