// material-ui
import {
    Grid,
    // InputAdornment, 
    Typography, FormLabel,

} from '@mui/material';
import MainCard from "../../../components/MainCard";
import * as React from "react";


// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ClientDetailCard = ({ data }) => {

    const [clientData, setClientData] = React.useState({});

    React.useEffect(() => {
        if (Object.keys(data).length > 0 && data !== undefined) {
            setClientData(data);
        }
    }, [data]);

    const getDisplayField = (label, value) => {
        return <Grid container direction="row" >
            <Grid item xs={12} md={6} lg={6} mb={6}>
                <FormLabel><Typography variant="h5">{label}:</Typography></FormLabel>
            </Grid>
            <Grid item xs={12} md={6} lg={6} mb={6} >
                <Typography variant="h5">
                    {value}
                </Typography>
            </Grid>
        </Grid>;
    }

    return (
        <MainCard elevation={0}
            border={false}
            content={false}
            sx={{ xs: "12", md: "7" }}>
            <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                Client Details
            </Typography>
            {getDisplayField("Client Type", clientData.type)}
            {clientData.type === "ORG" ?
                <>
                    {getDisplayField("Company Name (English)", clientData?.enCompanyName)}
                    {getDisplayField("Company Name (Chinese)", clientData?.chCompanyName)}
                    {getDisplayField("English Name", clientData.contactPerson)}
                    {getDisplayField("Contact Phone", clientData.contactTel ? clientData.contactTel.countryCode + " " + clientData.contactTel.phoneNumber : "")}
                    {getDisplayField("Email", clientData.emailBus)}
                </> :
                <>
                    {getDisplayField("English Name", clientData.enName)}
                    {getDisplayField("Chinese Name", clientData.chName)}
                    {getDisplayField("Contact Phone", clientData.mobileNumber ? clientData.mobileNumber.countryCode + " " + clientData.mobileNumber.phoneNumber : "")}
                    {getDisplayField("Email", clientData.emailAddress)}
                </>
            }
        </MainCard>
    );
};

export default ClientDetailCard;
