
import { ReactElement } from 'react';
import { Box, Card, CardContent, CardMedia, Divider, LinearProgress, Stack, Typography } from '@mui/material';
import { DataGrid, GridRenderCellParams } from '@mui/x-data-grid';
import { useNavigate } from 'react-router-dom'
import { renderProgress } from '@mui/x-data-grid-generator';
import { GridColDef } from '@mui/x-data-grid';

type EducationInfoProps = {
    title: string;
}
interface Row {
  id: number;
  task: string;
  progress: number; // Value from 0 to 100 for the progress bar
} 
export const EducationInfoCards = () => {
    return(
        <Stack direction={{sm:'row'}} justifyContent={{ sm: 'space-between' }} gap={3.75}>
            <EducationInfo title={'Education'} />


        </Stack>
    )
}

const EducationInfo = ({ title }: EducationInfoProps): ReactElement => {
    
    const navigate = useNavigate();

    const columns: GridColDef[] = [
        {
            field: 'id',
            headerName: 'ID'
        },
        {
            field: 'title',
            headerName: 'Title',
            flex: 1,
        },

        {
            field: 'category',
            headerName: 'Category',
            flex: 1,
        },

        {
            field: 'progress',
            headerName: 'Progress',
            flex: 1,
            renderCell: (params: GridRenderCellParams<Row, number>) => {
            const progressValue = params.value; // Access the progress value from the row data

            return (
                <Box sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
                <Box sx={{ width: '100%', mr: 1 }}>
                    <LinearProgress variant="determinate" value={progressValue} />
                </Box>
                <Box sx={{ minWidth: 35 }}>
                    <Typography variant="body2" color="text.secondary">{`${progressValue}%`}</Typography>
                </Box>
                </Box>
      );
    },
        },
        {
            field: 'status',
            headerName: 'Status',
            flex: 1,
        },

    ]

    const rows = [
        {
            id: 1,
            title: "How to Research Comparable Properties Like a Pro",
            category: "Pricing Strategy",
            progress: 100,
            status: "COMPLETED",
        },
        {
            id: 2,
            title: "Understanding Price Per Square Foot in Your Neighborhood",
            category: "Pricing Strategy",
            progress: 100,
            status: "COMPLETED",
        },
        {
            id: 3,
            title: "Psychological Pricing: Why $399,900 Works Better Than $400,000",
            category: "Pricing Strategy",
            progress: 100,
            status: "COMPLETED",
        },
        {
            id: 4,
            title: "When and How to Adjust Your Asking Price",
            category: "Pricing Strategy",
            progress: 100,
            status: "COMPLETED",
        },
        {
            id: 5,
            title: "Handling Lowball Offers: Strategies That Work",
            category: "Pricing Strategy",
            progress: 100,
            status: "COMPLETED",
        },
            

    

    

    

    
        {
            id: 6,
            title: "The Ultimate Home Staging Checklist for FSBO Sellers",
            category: "Property Preparation",
            progress: 90,
            status: "IN_PROGRESS",
        },
        {
            id: 7,
            title: "DIY Curb Appeal Upgrades Under $500",
            category: "Property Preparation",
            progress: 80,
            status: "IN_PROGRESS",
        },
        {
            id: 8,
            title: "Decluttering Secrets for Faster Sales",
            category: "Property Preparation",
            progress: 5,
            status: "IN_PROGRESS",
        },
        {
            id: 9,
            title: "Professional Photography Tips Using Just Your Smartphone",
            category: "Property Preparation",
            progress: 50,
            status: "IN_PROGRESS",
        },
        {
            id: 10,
            title: "Deep Cleaning Checklist Before Listing",
            category: "Property Preparation",
            progress: 50,
            status: "IN_PROGRESS",
        },
        {
            id: 11,
            title: "How to stage a home",
            category: "",
            progress: 0,
            status: "NOT_STARTED",
        },
    ]
    return(
        <Card
      sx={(theme) => ({
        boxShadow: theme.shadows[4],
        width: 1,
        height: 'auto',
      })}
    >
        <CardContent
                sx={{
                  flex: '1 1 auto',
                  padding: 0,
                  ':last-child': {
                    paddingBottom: 0,
                  },
                }}
              >
                <Stack direction="row" justifyContent="space-between" alignItems="center" flexWrap="wrap">
                    <Typography variant="subtitle1" component="p" minWidth={100} color="text.primary">
                        {title}
                    </Typography>
                </Stack>
                <Divider />

                <Stack
                    bgcolor="background.paper"
                    borderRadius={5}
                    width={1}
                    boxShadow={(theme) => theme.shadows[4]}
                    height={1}
                >
                    <DataGrid
                        getRowHeight={() => 70}
                        rows={rows}
                        columns={columns}
                        onRowClick={(event) => navigate('lesson')}
                    />


                </Stack>



              </CardContent>

        
    </Card>
    )

}

export default EducationInfo;