complex-shit

import React, { useContext, useEffect, useState } from 'react';
import { useDispatch } from "react-redux";
import Container from '@material-ui/core/Container';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add';
import { useStyles } from "./create-table/dynamic-create-table/styles";
import { HiveContext } from "../../../context/hive";
import validateInputField from "../../../utils/validate-input-field";
import { setAlertAction } from "../../../store/actions/alertsActions";
import classes from "../hbase/hbase.module.css";

export const DropPartitionEnhanced = () => {

    const styles = useStyles();

    const dispatch = useDispatch();

    const operators = [ '=', '<', '>', '<=', '>=' ];

    const caseTypes = ['operator', 'range'];

    const [color, setColor] = useState('secondary');

    const {
        caseType,
        operator,
        setCaseType,
        setOperator,
        endIsChecked,
        startIsChecked,
        setEndIsChecked,
        setStartIsChecked,
        setPartitionColsName
    } = useContext(HiveContext);

    const [inputFields, setInputFields] = useState([
        { name: '', value: '' },
    ]);

    const handleSubmit = (e) => {
        e.preventDefault();
        setColor('primary');
        setPartitionColsName([...inputFields]);
    };

    const handleChangeInput = (index, event) => {
        const values = [...inputFields];
        values[index][event.target.name] = event.target.value;
        if(!validateInputField(event.target.value)) {
            dispatch(setAlertAction('error', 'Inappropriate input value!', 5000));
            return false;
        } else {
            setInputFields(values);
        }
    };

    const handleAddFields = () => {
        setInputFields([...inputFields, { name: '', value: '', case: '', operator }]);
    };

    const handleRemoveFields = (index) => {
        const values  = [...inputFields];
        values.splice(index, 1);
        setInputFields(values);
    };

    const casesRadioDots = (
        <div className={`mt-5`}>
            <label className={`${classes.label}`}>
                <span className="text-gray-500">Case type</span>
            </label>
            <div className={`${classes.flexInlineRadios} `}>
                {
                    caseTypes.map(thingy => (
                        <label className={`${classes.label}`}>
                            <input type="radio" name="casesRadioDots" value={thingy} onChange={ event => setCaseType(event.target.value) } />
                            <p className={'ml-0.5'}>{ thingy }</p>
                        </label>
                    ))
                }
            </div>
        </div>
    );

    const operatorsDropdown = (
        <div className={`${classes.formContainer} my-5`}>

            <div className={`${classes.topRowInputs}`}>

                <div className={`${classes.formGroup} mt-5 w-25`}>

                    <select value={ operator }
                            onChange={ event => setOperator(event.target.value) }
                            className="py-8"
                    >
                        <option value="">Operator</option>
                        {
                            operators.map((value, index) => (
                                <option key={ index } value={value?.toLowerCase()}>{ value }</option>
                            ))
                        }
                    </select>
                </div>
            </div>
        </div>
    );

    useEffect(() => setCaseType('operator'), []);

    return (
        <Container>
            <form onSubmit={handleSubmit}>

                { inputFields.map((inputField, index) => {

                        return (
                            <div >

                                {
                                    caseType === 'operator' && (
                                        <div>
                                            { casesRadioDots }

                                            <input
                                                name="name"
                                                placeholder="name"
                                                value={inputField.name}
                                                onChange={ event => handleChangeInput(index, event) }
                                            />

                                            { operatorsDropdown }

                                            <input
                                                name="value"
                                                placeholder="value"
                                                value={inputField.value}
                                                onChange={event => handleChangeInput(index, event)}
                                            />
                                        </div>
                                    )
                                }
                                {
                                    caseType === 'range' && (
                                        <div>
                                            { casesRadioDots }
                                            <div>
                                                <input
                                                    name="name"
                                                    placeholder="name"
                                                    value={inputField.name}
                                                    onChange={ event => handleChangeInput(index, event) }
                                                />
                                                <input type="checkbox"
                                                       checked={ startIsChecked }
                                                       onChange={ event => setStartIsChecked(event.target.checked) }
                                                       className={`mr-2`}
                                                />
                                            </div>

                                            <div>
                                                <input
                                                    name="value"
                                                    placeholder="value"
                                                    value={inputField.value}
                                                    onChange={ event => handleChangeInput(index, event) }
                                                />
                                                <input type="checkbox"
                                                       checked={ endIsChecked }
                                                       onChange={ event => setEndIsChecked(event.target.checked) }
                                                       className={`mr-2`}
                                                />
                                            </div>

                                        </div>
                                    )
                                }
                                <IconButton onClick={() => handleRemoveFields(index)} >
                                    <RemoveIcon color="primary" />
                                </IconButton>
                                <IconButton onClick={() => handleAddFields()} >
                                    <AddIcon color="secondary" />
                                </IconButton>
                            </div>
                        )
                })  }
                <Button
                    type="submit"
                    onClick={handleSubmit}
                    className={styles.button}
                    variant="contained"
                    color={ color }
                >
                    CONFIRM PARTITION_COL INPUTS
                </Button>
            </form>
        </Container>
    );

};