// material-ui
import {
    Grid, TextField, Typography, Button
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
//import Checkbox from "@mui/material/Checkbox";
//import LoadingComponent from "../extra-pages/LoadingComponent";
import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
//import axios from 'axios';

//import {useParams} from "react-router-dom";

// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {

    const [currentUserData, setCurrentUserData] = useState(userData);
    const [editMode, setEditMode] = useState(false);
    const [locked, setLocked] = useState(false);


    const from = useForm({defaultValues: userData});
    const {register,reset, handleSubmit} = from;

    useEffect(() => {
        let createDate = DateUtils.datetimeStr(userData.created);
        let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy;
        userData["createDate"] = createDate;
        userData["modifieDate"] = modifiedBy;
        userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified";

        userData["country"] = userData.address?.country;
        userData["addressLine1"] = userData.address?.addressLine1;
        userData["addressLine2"] = userData.address?.addressLine2;
        userData["addressLine3"] = userData.address?.addressLine3;
        userData["addressLine3"] = userData.address?.addressLine3;

        userData["phoneNumber"] = userData.contactTel?.phoneNumber;
        userData["tel_countryCode"] = userData.contactTel?.countryCode;

        userData["faxNumber"] = userData.faxNo?.faxNumber;
        userData["fax_countryCode"] = userData.faxNo?.countryCode;
        
        setCurrentUserData(userData);
    }, [userData]);

    useEffect(() => {
        reset(currentUserData);
        setLocked(currentUserData.locked);
    }, [currentUserData]);


    function onSubmitForm(_formData) {
        HttpUtils.post({
            url: UrlUtils.POST_IND_USER+"/"+userData.id,
            params: {
                prefix: _formData.prefix,
                enName: _formData.enName,
                chName: _formData.chName,
                idDocType: _formData.idDocType,
                contactTel: {
                    countryCode: _formData.tel_countryCode,
                    phoneNumber: _formData.phoneNumber
                },
                identification: _formData.identification,
                faxNo:{
                    countryCode: _formData.fax_countryCode,
                    faxNumber: _formData.faxNumber
                },
                emailAddress:_formData.emailAddress,
                address:{
                    country:_formData.country,
                    addressLine1: _formData.addressLine1,
                    addressLine2: _formData.addressLine2,
                    addressLine3: _formData.addressLine3,
                },
            },
            onSuccess: function(){
                    loadDataFun();
            }
        });
    }

    const onEditClick = () => {
        setEditMode(true);
    };

    const onVerifiedClick = () => {
        HttpUtils.get({
            url: UrlUtils.GET_IND_USER_VERIFY+"/"+id,
            onSuccess: function(){
                loadDataFun();
            }
        });
    };
    
    const doLock = () => {
        HttpUtils.get({
            url: UrlUtils.GET_USER_LOCK+"/"+userData.id,
            onSuccess: function(){
                    loadDataFun();
            }
        }); 
    };

    const doUnlock = () => {
        HttpUtils.get({
            url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id,
            onSuccess: function(){
                    loadDataFun();
            }
        }); 
    };

    const downloadFile = ()=>{
        HttpUtils.fileDownload({
            fileId: userFile.fileId,
            skey: userFile.skey,
            filename: userFile.filename
        });
    };

    return (
            <MainCard elevation={0}
                      border={false}
                      content={false}
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                    Information
                </Typography>

                <form onSubmit={handleSubmit(onSubmitForm)}>
                               
                    <Grid container spacing={1}>
                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Username:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        id='username'
                                        disabled
                                        {...register("username")}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    English Name:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("enName")}
                                        id='enName'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Created Date:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("createDate")}
                                        id='createDate'
                                        disabled
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Prefix:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("prefix")}
                                        id='prefix'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Chinese Name:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("chName")}
                                        id='chName'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Last Updated:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("modifieDate")}
                                        id='modifieDate'
                                        disabled
                                    />
                                </Grid>
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    ID Type:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("idDocType")}
                                        id='idDocType'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Contact Tel:
                                </Grid>
                                <Grid item xs={2}>
                                    <TextField
                                        fullWidth
                                        {...register("tel_countryCode")}
                                        id='tel_countryCode'
                                        disabled={!editMode}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        {...register("phoneNumber")}
                                        id='phoneNumber'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Verified:
                                </Grid>

                                
                                {
                                    currentUserData.verified || editMode?
                                    <Grid item xs={6}>
                                        <TextField
                                            fullWidth
                                            {...register("verifiedStatus")}
                                            id='verifiedStatus'
                                            disabled
                                        />
                                    </Grid>
                                    :
                                    <>
                                        <Grid item xs={4}>
                                            <TextField
                                                fullWidth
                                                {...register("verifiedStatus")}
                                                id='verifiedStatus'
                                                disabled
                                            />
                                        </Grid>
                                        <Grid item xs={1}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                                onClick={onVerifiedClick}
                                            >
                                                Verified
                                            </Button>
                                        </Grid>
                                    </>
                                }
                                
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    ID No.:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6} >
                                    <TextField     
                                        {...register("identification",
                                        {
                                            value: currentUserData?.identification,
                                        })}
                                        id='identification'
                                        disabled={!editMode}
                                    />
                                     <Button lg={2} variant="contained" onClick={downloadFile} >View File</Button>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Fax No.:
                                </Grid>

                                <Grid item xs={2} >
                                    <TextField
                                        fullWidth
                                        {...register("fax_countryCode")}
                                        id='fax_countryCode'
                                        disabled={!editMode}
                                    />
                                </Grid>
                                <Grid item xs={4} >
                                    <TextField
                                        fullWidth
                                        {...register("faxNumber")}
                                        id='faxNumber'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Last Login:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>

                                      <TextField
                                             fullWidth
                                             {...register("lastLogin",
                                                 {
                                                     value: currentUserData?.lastLogin,
                                                 })}
                                             id='lastLogin'
                                             disabled
                                        >
                                        </TextField>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Country:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("country")}
                                        id='country'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Email:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("emailAddress")}
                                        id='emailAddress'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Status:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("status")}
                                        id='status'
                                        disabled
                                    />
                                </Grid>
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center top'}}>
                                    Address:
                                </Grid>

                                <Grid item xs={7} s={7} md={12} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("addressLine1",
                                            {
                                                value: currentUserData?.address?.addressLine1,
                                            })}
                                        id='addressLine1'
                                        disabled={!editMode}
                                    />
                                    <TextField
                                        fullWidth
                                        {...register("addressLine2",
                                            {
                                                value: currentUserData?.address?.addressLine2,
                                            })}
                                        id='addressLine2'
                                        disabled={!editMode}
                                    />
                                    <TextField
                                        fullWidth
                                        {...register("addressLine3",
                                            {
                                                value: currentUserData?.address?.addressLine3,
                                            })}
                                        id='addressLine3'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>

                     {/*bottom button*/}
                <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
                    <Grid container maxWidth justifyContent="flex-end">
                         
                    {editMode?
                    <>
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                type="submit"
                                color="success"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                            >
                                Save
                            </Button>
                        </Grid>
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                onClick={loadDataFun}
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                            >
                                Cancel & Back
                            </Button>
                        </Grid>
                        </>
                        :
                        <>
                        {locked?
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                color="primary"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                onClick={doUnlock}
                            >
                                Unlock
                            </Button>
                        </Grid>
                        :
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                color="primary"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                onClick={doLock}
                            >
                                Lock
                            </Button>
                        </Grid>
                        }
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                onClick={onEditClick}
                            >
                                Edit
                            </Button>
                        </Grid>
                        </>
                    }
                    
                        
                    </Grid>
                </Grid>

                </form>
            </MainCard>
    );
};

export default UserInformationCard_Individual;
