import React, {ReactNode, useState} from 'react';
import FormButtonProceed from "../../../UI/Forms/FormButton/FormButtonProceed";

type StepAfmProps = {
    children?: ReactNode
    onSubmit: (afm: string) => any
    loading: boolean
}

const StepAfmForm = ({onSubmit, loading}: StepAfmProps) => {

    const [afm, setAfm] = useState('')
    return (
        <div className="step-wrapper" id={'step-afm'}>

            <div className="step-wrapper--title">
                <h1>Αίτημα δημιουργίας Demokritos User Account (D.U.A.) <span className="step-no">Βήμα 1 / 2</span></h1>
                <p>Παρακαλώ συμπληρώστε το ΑΦΜ σας & πατήστε επόμενο.</p>
            </div>
            <form onSubmit={(e) => {
                e.preventDefault()
                onSubmit(afm)
            }}
            >
                {/* afm input field with label - 5 prefilled numbers - user have to insert 4 number (3 tries) */}

                <div className="step-wrapper--afm">
                    <input
                        type="text"
                        id="afm"
                        pattern="[0-9]{9}"
                        // inputMode="numeric"
                        value={afm}
                        maxLength={9}
                        // different way to force only numbers input instead of regex. NO REASON for that. just for encyclopedic knowledge
                        onChange={(e) => setAfm(e.target.value.slice(0, 9).replace(/\D/g,''))}
                    />
                    <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'>

                                {/*  user's input - 4 digits  */}
                                {
                                    Array(9).fill(null).map((_, i) => {
                                        return i < afm.length ?
                                            <div key={i} className={'filled'}>{afm[i]}</div>
                                            :
                                            <div className={"empty"} key={i}></div>
                                    })
                                }
                            </div>

                        </div>
                    </label>
                </div>

                <FormButtonProceed
                    loading={loading}
                    disabled={afm.length < 9}
                >
                        <span>
                            ΕΠΟΜΕΝΟ
                        </span>
                </FormButtonProceed></form>
        </div>
    );
}

export default StepAfmForm;