// material-ui
import {
    Stack,
    Typography,
    Button
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";

import { useNavigate } from "react-router-dom";

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


const SearchDemandNoteForm = () => {
    const navigate = useNavigate()
    const [itemList, setItemList] = React.useState([]);

    React.useEffect(() => {
        loadData();
    }, []);

    const loadData = () => {

        HttpUtils.get({
            url: UrlUtils.GET_MSG_DASHBOARD,
            onSuccess: function (response) {
                let list = []
                response.map((item) => {
                    list.push(
                        <Button onClick={()=>{navigate("/msg/details/"+item.id);}} color={item.readTime?"gray":"black"} style={{justifyContent: "flex-start"}} sx={{p:2}}>
                            <Stack direction="column" >
                                <Typography variant='h4' align="justify"><b>{item.subject}</b></Typography>
                                <Typography align="justify">{DateUtils.datetimeStr(item.sentDate)}</Typography>
                            </Stack>
                        </Button>
                    )
                });

                setItemList(list);

            }
        });
    };


    return (
        <MainCard xs={12} md={12} lg={12}
            border={false}
            content={false}
            sx={{ backgroundColor: '#fff' }}
        >
            <Stack direction="column" spacing={1}>
                {itemList}
            </Stack>
        </MainCard>
    );

};

export default SearchDemandNoteForm;
