// material-ui
import {
    Grid, TextField, Typography, Button
} from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
//import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import {useNavigate} from "react-router-dom";

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


const OrganizationCard = ({userData, id}) => {

    const [currentUserData, setCurrentUserData] = useState(userData);
    const from = useForm({defaultValues: userData});
    const {register,reset, handleSubmit} = from;

    const navigate = useNavigate();

    useEffect(() => {
        if(id>0){
            userData["country"] = userData.addressTemp?.country;
            userData["district"] = userData.addressTemp?.district;
            userData["addressLine1"] = userData.addressTemp?.addressLine1;
            userData["addressLine2"] = userData.addressTemp?.addressLine2;
            userData["addressLine3"] = userData.addressTemp?.addressLine3;
            
            userData["phoneNumber"] = userData.contactTel?.phoneNumber;
            userData["tel_countryCode"] = userData.contactTel?.countryCode;

            userData["faxNumber"] = userData.faxNo?.faxNumber;
            userData["fax_countryCode"] = userData.faxNo?.countryCode;

            userData["brExpiryDate"] = userData.brExpiryDate?userData.brExpiryDate: "";
            userData["brExpiryDateTemp"] = userData.brExpiryDateTemp?userData.brExpiryDate: "";
        }else{
            setCreateMode(id==0);
            setEditMode(id==0);

            userData["brExpiryDate"] =  "";
            userData["brExpiryDateTemp"] = ""; 
        }
        
        setCurrentUserData(userData);
    }, [userData]);

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


    function onSubmitForm(_formData) {
        HttpUtils.post({
            url: UrlUtils.POST_ORG_SAVE_PATH,
            params: {
                id:id>0?id:null,
                enCompanyName: _formData.enCompanyName,
                chCompanyName: _formData.chCompanyName,
                brNo: _formData.brNo,
                brExpiryDate: _formData.brExpiryDate,
                enCompanyNameTemp: _formData.enCompanyNameTemp,
                chCompanyNameTemp: _formData.chCompanyNameTemp,
                brExpiryDateTemp: _formData.brExpiryDateTemp,
                contactPerson: _formData.contactPerson,
                contactTel: {
                    countryCode: _formData.tel_countryCode,
                    phoneNumber: _formData.phoneNumber
                },
                faxNo: {
                    countryCode: _formData.fax_countryCode,
                    faxNumber: _formData.faxNumber
                },
                addressTemp: {
                    country: _formData.country,
                    district: _formData.district,
                    addressLine1: _formData.addressLine1,
                    addressLine2: _formData.addressLine2,
                    addressLine3: _formData.addressLine3,             
                }
            },
            onSuccess: function(responseData){
                navigate('/org/'+responseData.id);
            }
        });
    }

    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'}}>
                                BR No.:
                            </Grid>

                            <Grid item xs={7} s={7} md={7} lg={6}>
                                <TextField
                                    fullWidth
                                    id='brNo'
                                    inputProps={{ maxLength: 8 }}
                                    
                                    {...register("brNo")}
                                />
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid item lg={8} >
                    </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'}}>
                                    Name (Eng):
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("enCompanyName")}
                                        id='enCompanyName'
                                        
                                        inputProps={{ maxLength: 150 }}
                                    />
                                </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'}}>
                                    Name (Ch):
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("chCompanyName")}
                                        id='chCompanyName'
                                        inputProps={{ maxLength: 150 }}
                                    />
                                </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'}}>
                                    Expiry Date:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                <LocalizationProvider fullWidth dateAdapter={AdapterDayjs}>
                                 
                                    <DatePicker
                                        fullWidth
                                        {...register("brExpiryDate")}
                                        id='brExpiryDate'
                                        name='brExpiryDate'
                             
                                    />
                                    </LocalizationProvider>
                                </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 Person:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("contactPerson")}
                                        id='contactPerson'
                                        
                                        inputProps={{ maxLength: 150 }}
                                    />
                                </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
                                        type="number"
                                        defaultValue="852"
                                        {...register("tel_countryCode")}
                                        id='tel_countryCode'
                                        
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        type="tel"
                                        inputProps={{ maxLength: 20 }}
                                        {...register("phoneNumber")}
                                        id='phoneNumber'
                                        
                                    />
                                </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
                                        type="number"
                                        defaultValue="852"
                                        {...register("fax_countryCode")}
                                        id='fax_countryCode'
                                        
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        inputProps={{ maxLength: 20 }}
                                        type="number"
                                        {...register("faxNumber")}
                                        id='faxNumber'
                                        
                                    />
                                </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'
                                        
                                    />
                                </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'}}>
                                    District :
                                </Grid>

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

                        <Grid item lg={4} >
                            <Grid container alignItems={"top"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
                                        <Grid item lg={12}  sx={{alignItems: 'center'}}>Address :</Grid>
                                </Grid> 
                                <Grid item lg={6}>
                                    <Grid item lg={12}>
                                        <TextField
                                            fullWidth
                                            {...register("addressLine1")}
                                            id='addressLine1'
                                            
                                            inputProps={{ maxLength: 255 }}
                                        />
                                    </Grid>
                                    <Grid item lg={12}>
                                        <TextField
                                            fullWidth
                                            {...register("addressLine2")}
                                            id='addressLine2'
                                            
                                            inputProps={{ maxLength: 255 }}
                                        />
                                    </Grid>
                                    <Grid item lg={12}>
                                        <TextField
                                            fullWidth
                                            {...register("addressLine3")}
                                            id='addressLine3'
                                            
                                            inputProps={{ maxLength: 255 }}
                                        />
                                    </Grid>
                                </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">

                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                type="submit"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                            >
                                Create
                            </Button>
                        </Grid>
                         
                    </Grid>
                </Grid>

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

export default OrganizationCard;
