import DashboardLayouts from "@/layouts/dashboardLayouts";
import useUser from "@/lib/app/hooks/useUser";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import {
    Avatar,
    Card,
    CardActions,
    CardContent,
    CardHeader,
    Collapse,
    Grid,
    IconButton,
    Stack,
    Typography
} from "@mui/material";
import {styled} from "@mui/material/styles";
import {useTranslations} from "next-intl";
import {useState} from "react";

const ExpandMore = styled((props) => {
    const {expand, ...other} = props;
    return <IconButton {...other} />;
})(({theme, expand}) => ({
    transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
        duration: theme.transitions.duration.shortest,
    }),
}));

const data = [
    {
        name: "جان دو",
        date: "۱۳۹۹/۰۴/۲۵",
        description:
            "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.",
    },
    {
        name: "جین اسمیت",
        date: "۱۳۹۹/۰۴/۲۶",
        description: "نُلا ویته الیت لیبرو آ، آ فارِترا آوگوه.",
    },
    {
        name: "مایک جانسون",
        date: "۱۳۹۹/۰۴/۲۷",
        description:
            "دوئیس مولیس، است نُن کُمُدو لُکتوس، نیسی ارات پورتیتور لیگولا.",
    },
];

const LoanFollowUpComponent = () => {
    const t = useTranslations();
    const {token} = useUser();

    const [expanded, setExpanded] = useState([]);

    const handleExpandClick = (index) => {
        setExpanded((prevExpanded) => {
            const newExpanded = [...prevExpanded];
            newExpanded[index] = !newExpanded[index];
            return newExpanded;
        });
    };

    return (
        <DashboardLayouts>
            <Stack
                spacing={2}
                sx={{
                    p: 4,
                    width: "100%",
                }}
            >
                <Grid
                    container
                    columnSpacing={2}
                    rowSpacing={2}
                    sx={{alignItems: "start", justifyContent: "center"}}
                >
                    {data.map((item, index) => (
                        <Grid item xs={12} md={6} lg={4} key={index}>
                            <Card sx={{width: "100%"}}>
                                <CardHeader
                                    avatar={
                                        <Avatar
                                            sx={{bgcolor: "primary.main"}}
                                            aria-label="recipe"
                                        ></Avatar>
                                    }
                                    title={item.name}
                                    subheader={item.date}
                                />
                                <CardContent>
                                    <Typography variant="body2" color="text.secondary">
                                        متن تست
                                    </Typography>
                                </CardContent>
                                <CardActions disableSpacing>
                                    <ExpandMore
                                        expand={expanded[index]}
                                        onClick={() => handleExpandClick(index)}
                                        aria-expanded={expanded[index]}
                                        aria-label="show more"
                                    >
                                        <ExpandMoreIcon/>
                                    </ExpandMore>
                                </CardActions>
                                <Collapse in={expanded[index]} timeout="auto" unmountOnExit>
                                    <CardContent>
                                        <Typography paragraph>اطلاعات تکمیلی:</Typography>
                                        <Typography paragraph>{item.description}</Typography>
                                    </CardContent>
                                </Collapse>
                            </Card>
                        </Grid>
                    ))}
                </Grid>
            </Stack>
        </DashboardLayouts>
    );
};

export default LoanFollowUpComponent;
