// material-ui
import {
    Stack,
    Typography,
    Divider
} 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 { useIntl} from "react-intl";

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


const SearchDemandNoteForm = () => {

    const [itemList, setItemList] = React.useState([]);
    const [listData, setListData] = React.useState([]);
    const intl = useIntl();
    const { locale } = intl;


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

    React.useEffect(() => {
        let list = []
        if(listData == []) return;
        listData.map((item) => {
            list.push(
                <Stack direction="column"  >
                    <Typography variant='h4' align="justify"><b>{locale === 'en' ?item.subjectEng:locale === 'zh-HK' ?item.subjectCht:item.subjectChs}</b></Typography>
                    <Typography align="justify">{DateUtils.dateStr(item.announceDate)}</Typography>
                    <Typography align="justify"sx={{ pt: 1 }}>{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography>
                    <Divider fullWidth sx={{ pt: 1 }}></Divider>
                </Stack>
            )
        });
        setItemList(list);
    }, [listData,intl]);

    const loadData = () => {

        HttpUtils.get({
            url: UrlUtils.GET_ANNOUNCE_DASHBOARD,
            onSuccess: function (response) {
                setListData(response);
            }
        });
    };


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

export default SearchDemandNoteForm;