// 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 = (props) => {

    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, index) => {
            list.push(
                <Stack key={item.id != null ? item.id : `announce-${index}`} 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.dateValue(item.announceDate)}</Typography>
                    <Typography sx={{pt: 1}} align="justify">{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography>
                    <Divider sx={{ pt: 1 }} />
                </Stack>
            )
        });
        setItemList(list);
    }, [listData,intl]);

    const loadData = () => {

        if(props.listData.length > 0){
            setListData(props.listData)
        }
    };


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

export default SearchDemandNoteForm;
