import React, {useState} from "react";
import FormButton from "../../../UI/FormButton/FormButton";
import Caution from "../../../../assets/images/caution.svg";
import {AfmData} from "../../../../models/DuaActivate";
import FormButtonSubmit from "../../../UI/FormButton/FormButtonSubmit";
import useLoading from "../../../../hooks/useLoading";

interface StepAfmProps extends AfmData  {
    handleRefuseAfm: () => void;
    handleVerifyAfm: (afm: string) => void;
};

//to add state for no. of trials
const StepAfm = (props: StepAfmProps) => {
    const [isLoading, setIsLoading] = useLoading(false);
    const [userInput, setUserInput] = useState('')
    const validateInputs = (): boolean => {
        return (
            userInput.length > 3
        );
    };

    // step: afm - first step - user have to insert 4 last digits of afm
    return (
        // title and subtitle
        <div id="step-afm" className="step">
            <div className="step-wrapper">
                <div className="step-wrapper--title">
                    <h1>D.U.A. Ενεργοποίηση <span className="step-no">Βήμα 1 / 2</span></h1>
                    <p>Παρακαλώ συμπληρώστε τα ψηφία που λείπουν από το ΑΦΜ σας:</p>
                </div>
                <form onSubmit={(e) => {
                    setIsLoading(true)
                    e.preventDefault()
                    props.handleVerifyAfm(props.partial_afm + userInput)
                    setUserInput("")
                    setIsLoading(false)
                }
                }
                >
                    {/* afm input field with label - 5 prefilled numbers - user have to insert 4 number (3 tries) */}
                    <div className="step-wrapper--afm">
                        <input
                            type="number"
                            id="afm"
                            pattern="[0-9]*"
                            inputMode="numeric"
                            value={userInput}
                            maxLength={4}
                            // different way to force only numbers input instead of regex. NO REASON for that. just for encyclopedic knowledge
                            onChange={(e) => setUserInput((v) => (e.target.validity.valid ? e.target.value : v))}
                        />
                        <label className="step-wrapper--afm--label" htmlFor='afm'><span>ΑΦΜ</span>
                            <div className="d-flex justify-content-between">
                                {/* 5 prefilled numbers */}
                                <div className='step-wrapper--afm--input'>
                                    {props.partial_afm.split('').map(function (number, index) {
                                        return <div className={"filled"} key={index}>{number}</div>
                                    })
                                    }
                                    {/*  user's input - 4 digits  */}
                                    {
                                        Array(4).fill(null).map((_, i) => {
                                            return i < userInput.length ?
                                                <div key={i} className={'filled'}>{userInput[i]}</div>
                                                :
                                                <div className={"empty"} key={i}></div>
                                        })
                                    }
                                </div>
                                {/* warning for tries remaining (3 max) */}
                                {props.tries_remaining <= 2 && <div className="step-wrapper--afm--trials">
                                    <img src={Caution} alt="caution"/>
                                    <p>Έχετε {props.tries_remaining} {props.tries_remaining == 1 ? "προσπάθεια" : "προσπάθειες"} ακόμα.</p>
                                    </div>
                                }
                            </div>
                        </label>
                    </div>
                    {/* Submit button */}
                    <FormButtonSubmit
                        disabled={!validateInputs() || isLoading}
                    >
                        <span>
                            ΕΠΟΜΕΝΟ ΒΗΜΑ
                        </span>
                    </FormButtonSubmit></form>
                {/* in case afm is wrong - */}
                <div className="step-wrapper--wrongafm">
                    <a onClick={props.handleRefuseAfm}>Τα προσυμπληρωμένα ψηφία δεν αντιστοιχούν στο ΑΦΜ
                        μου</a>
                </div>
            </div>
        </div>
    );
};
export default StepAfm;