import React, {useEffect, useState} from 'react';
import {useNavigate, useSearchParams} from "react-router-dom";
import {DuaSettings} from '../../../../models/Settings/DUASettings'
import {getDuaSettings} from '../../../../API/settings';
import FormButtonBack from '../../../UI/FormButton/FormButtonBack';
import CustomTextField from "../../../UI/CustomTextField/CustomTextField";
import CustomFormSection from '../../../UI/CustomFormSection/CustomFormSection';
import CustomLabel from "../../../UI/CustomLabel/CustomLabel";
import PageTitle from '../../../UI/Typography/PageTitle';
import PageSubTitle from '../../../UI/Typography/PageSubtitle';
import "./dua-settings.scss";

const DUASettings = () => {
    const navigate = useNavigate();
    const activeRole = useSearchParams()[0].get("activeRole");
    const [duaSettings, setDuaSettings] =useState<DuaSettings>({
        // Initialize the state with default values or an empty object
        afm: ' ',
        email: ' ',
        firstname: ' ',
        firstname_en: ' ',
        lastname: ' ',
        lastname_en: ' ',
        father_name: ' ',
        father_name_en: ' ',
        amka: ' ',
        education_category: ' ',
        work_relation: ' ',
        staff_category: ' ',
    });

    const fetchUserSettings = async () => {
        try{
            const res = await getDuaSettings();
            setDuaSettings(res.data);
        } catch(err) {
        } 
    }

    useEffect(() => {
        fetchUserSettings();
    }, [])

    return (
        <div className='dua-settings-container'>
            <div className='dua-settings-container--introduction'>
                <PageTitle>Demokritos User Account (D.U.A.)</PageTitle>
                <PageSubTitle>Δείτε τα στοιχεία του Demokritos User Account (D.U.A.) που έχετε επιβεβαιώσει κατά το Activation του D.U.A.</PageSubTitle>
            </div>
            <form>
                <CustomFormSection theme={"user-form"}>
                        <div className="row">
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                ΑΦΜ
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.afm}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                ΕΜΑΙL
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.email}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                        </div>
                    </CustomFormSection>
                    <CustomFormSection theme={"user-form"}>
                        <div className="row">
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                ΟΝΟΜΑ (ΕΛΛΗΝΙΚΑ)
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.firstname}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                FIRST ΝΑΜΕ (ENGLISH)
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.firstname_en}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                        </div>
                    </CustomFormSection>
                    <CustomFormSection theme={"user-form"}>
                        <div className="row">
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                ΕΠΙΘΕΤΟ (ΕΛΛΗΝΙΚΑ)
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.lastname}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                SURNAME (ENGLISH)
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.lastname_en}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                        </div>
                    </CustomFormSection>
                    <CustomFormSection theme={"user-form"}>
                        <div className="row">
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                ΟΝΟΜΑ ΠΑΤΕΡΑ (ΕΛΛΗΝΙΚΑ)
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.father_name}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                FATHER'S FIRSTNAME (ENGLISH)
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.father_name_en}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                        </div>
                    </CustomFormSection>
                    <CustomFormSection theme={"user-form"}>
                        <div className="row">
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                ΑΜΚΑ
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.amka}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                ΒΑΘΜIΔΑ ΕΚΠΑIΔΕΥΣΗΣ
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.education_category}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                        </div>
                    </CustomFormSection>
                    <CustomFormSection theme={"user-form"}>
                        <div className="row">
                            <div className={'col-12'}>
                                <CustomLabel>
                                ΣΧEΣΗ ΕΡΓΑΣIΑΣ
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.work_relation}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                        </div>
                    </CustomFormSection>
                    <CustomFormSection theme={"user-form"}>
                        <div className="row">
                            <div className={'col-12'}>
                                <CustomLabel>
                                ΚΑΤΗΓΟΡΙΑ ΠΡΟΣΩΠΙΚΟΥ
                                </CustomLabel>
                                <CustomTextField
                                    readOnly={true}
                                    value={duaSettings?.staff_category}
                                    theme={'afm-form'}
                                    onChange={(e) => {
                                    console.log('this is a readonly field')
                                    }}
                                />
                            </div>
                        </div>
                    </CustomFormSection>
                    <FormButtonBack onClick={() => {navigate({pathname: '../',search: `?activeRole=${activeRole}`,});}} buttonType='button'>Πίσω</FormButtonBack>
                </form> 
        </div>
    );
}

export default DUASettings;