// material-ui
import {
    FormControl,
    Button,
    Grid,
    Typography, FormLabel,

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

import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));

import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import * as HttpUtils from "utils/HttpUtils";

import DownloadIcon from '@mui/icons-material/Download';
import { notifyDownloadSuccess } from 'utils/CommonFunction';

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

    const [appDetail, setAppDetails] = React.useState({});

    React.useEffect(() => {
        if (Object.keys(data).length > 0) {
            setAppDetails(data);
        }
    }, [data]);

    const onDownloadClick = () => () => {
        HttpUtils.fileDownload({
            fileId: appDetail.appFileId,
            skey: appDetail.appSkey,
            filename: appDetail.appFilename,
        });
        notifyDownloadSuccess();
    };

    return (

        <MainCard elevation={0}
            border={false}
            content={false}
        >
            <Typography variant="h4" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
                Application Details
            </Typography>
            <Grid container direction="column">
                <Grid item xs={12} md={12}>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Application No:</Typography></FormLabel>
                                </Grid>

                                <Grid item xs={12} md={9} lg={9}>
                                    <Typography variant="h5">
                                        {appDetail.appNo}
                                    </Typography>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={3} lg={3}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Status:</Typography></FormLabel>
                                </Grid>

                                <Grid item xs={12} md={9} lg={9}>
                                    <FormControl variant="outlined">
                                        {StatusUtils.getStatusByTextEng(appDetail.appStatus)}
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={3} lg={3}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
                                </Grid>

                                <Grid item xs={12} md={9} lg={9}>
                                    <FormControl variant="outlined" fullWidth disabled >
                                        <Typography variant="h5">
                                            {appDetail.orgId === null ?
                                                appDetail.contactPerson : appDetail.enCompanyName
                                            }
                                        </Typography>
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={4} lg={4}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
                                </Grid>

                                <Grid item xs={12} md={8} lg={8}>
                                    <Typography variant="h5">
                                        {appDetail.contactTelNo ? appDetail.contactTelNo.countryCode + " " + appDetail.contactTelNo.phoneNumber : ""}
                                    </Typography>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={3} lg={3}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Contact Person:</Typography></FormLabel>
                                </Grid>

                                <Grid item xs={12} md={9} lg={9}>
                                    <Typography variant="h5">
                                        {appDetail.contactPerson}
                                    </Typography>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={4} lg={4}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Contact Fax:</Typography></FormLabel>
                                </Grid>

                                <Grid item xs={12} md={8} lg={8}>
                                    <Typography variant="h5">
                                        {appDetail.contactFaxNo ? appDetail.contactFaxNo.countryCode + " " + appDetail.contactFaxNo.faxNumber : ""}
                                    </Typography>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between"
                        alignItems="center">
                        <Grid item xs={12} md={6} lg={6} mt={1} mb={2}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={12} lg={12}>
                                    <Grid container direction="row">
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="h5">Manuscript File:</Typography></FormLabel>
                                        </Grid>
                                        <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
                                            <Grid container direction="row" justifyContent="flex-start">
                                                <Grid item xs={12} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}>
                                                    <FormControl variant="outlined" fullWidth  >
                                                        <Typography
                                                            // fullWidth
                                                            id='fileName'
                                                            variant="h5"
                                                            sx={{ wordBreak: 'break-word' }}
                                                        >
                                                            {appDetail.appFilename}
                                                        </Typography>
                                                    </FormControl>
                                                </Grid>
                                                <Grid item md={2} lg={2}>
                                                    <Button
                                                        size="small"
                                                        variant="contained"
                                                        onClick={onDownloadClick()}
                                                        sx={{
                                                            textTransform: 'capitalize',
                                                            alignItems: 'end',
                                                        }}>
                                                        <DownloadIcon />
                                                    </Button>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>

        </MainCard>
    );
};

export default ApplicationDetailCard;