import {Box, Button, Card, CardContent, Grid, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import moment from "jalali-moment";
import {LinkRouting} from "@witel/webapp-builder";
import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';

const RequestCard = ({item}) => {
    const t = useTranslations();
    return (
        <Grid item xs={12} lg={6} xl={4}>
            <Card sx={{
                width: "100%",
                boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
            }}>
                <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start' , paddingBottom: '16px !important'}}>
                    <Box
                        sx={{
                            borderLeft: '6px solid',
                            borderColor: 'primary.main',
                            borderRadius: '6px 0px 0px 6px',
                            paddingLeft: '10px',
                        }}
                    >
                        <Typography variant="h6" sx={{lineHeight: 2 , fontWeight:'bold'}}>
                            {`${t("LoanFollowUp.loan_unique_code")}: ${item.id}`}
                        </Typography>
                    </Box>
                    <Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
                        {`${t("LoanFollowUp.loan_date")}: ${moment(item.created_at).locale("fa").format("HH:mm | YYYY/MM/DD")}`}
                    </Typography>
                    <Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
                        {`${t("LoanFollowUp.loan_bank_branch")}: ${item.branch_info === null ? '-' : item.branch_info}`}
                    </Typography>
                    <Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
                        {`${t("LoanFollowUp.loan_status")}: `}
                        {item.loan_state}
                        {item.state_id >= 1 && item.state_id <= 6 && <AccessTimeFilledIcon sx={{verticalAlign: 'middle', marginLeft: '4px' , color: '#48a4df'}}/>}
                        {item.state_id === 8 && <CheckCircleIcon sx={{verticalAlign: 'middle', marginLeft: '4px', color: 'green'}}/>}
                        {item.state_id === 7 && <CancelIcon sx={{verticalAlign: 'middle', marginLeft: '4px', color: 'red'}}/>}
                    </Typography>
                    <Button variant="contained" color="primary" sx={{alignSelf: 'flex-end'}}>
                        <LinkRouting underline="none" color="inherit" href={`/dashboard/navgan/${item.id}/show`}>
                            {t("LoanFollowUp.loan_details")}
                        </LinkRouting>
                    </Button>
                </CardContent>
            </Card>
        </Grid>
    );
};

export default RequestCard;