import React from 'react';
import {
  Card,
  CardContent,
  Typography,
  Grid,
  Box,
  ImageList,
  ImageListItem,
  ImageListItemBar,
  Button,
} from '@mui/material';

import MapComponent from '../../../../base/MapComponent';
import { PropertiesAPI } from 'types';

interface PropertyCardProps {
  property: PropertiesAPI;
}

const PropertyCard: React.FC<PropertyCardProps> = ({ property }) => {
  // Dummy latitude and longitude for demonstration
  // In a real app, you'd geocode the address to get these.
  const demoLat = 34.0522;
  const demoLng = -118.2437; // Example: Los Angeles coordinates
  console.log(property);

  return (
    <Card sx={{ mt: 3, p: 2 }}>
      <CardContent>
        <Typography variant="h6" gutterBottom>
          {property.address}, {property.city}, {property.state} {property.zip_code}
        </Typography>
        <Grid container spacing={2}>
          <Grid size={{ xs: 12, md: 6 }}>
            {property.pictures && property.pictures.length > 0 && (
              <ImageList
                cols={property.pictures.length > 1 ? 2 : 1}
                rowHeight={164}
                sx={{ maxWidth: 500 }}
              >
                {property.pictures.map((item, index) => (
                  <ImageListItem key={index}>
                    <img
                      srcSet={`${item}?w=164&h=164&fit=crop&auto=format 1x,
                                                    ${item}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
                      src={`${item}?w=164&h=164&fit=crop&auto=format`}
                      alt={`Property image ${index + 1}`}
                      loading="lazy"
                    />
                    <ImageListItemBar title={`Image ${index + 1}`} />
                  </ImageListItem>
                ))}
              </ImageList>
            )}
            <Typography variant="body1" sx={{ mt: 2 }}>
              <strong>Description:</strong>
            </Typography>
            {property.description ? (
              <Typography variant="body2" color="textSecondary">
                {property.description}
              </Typography>
            ) : (
              <Button variant="contained">Generate Description</Button>
            )}
          </Grid>
          <Grid size={{ xs: 12, md: 6 }}>
            <Typography variant="body1">
              <strong>Stats:</strong>
            </Typography>
            <Typography variant="body2">Sq Ft: {property.sq_ft || 'N/A'}</Typography>
            <Typography variant="body2">Bedrooms: {property.num_bedrooms || 'N/A'}</Typography>
            <Typography variant="body2">Bathrooms: {property.num_bathrooms || 'N/A'}</Typography>
            <Typography variant="body2">
              Features:{' '}
              {property.features && property.features.length > 0
                ? property.features.join(', ')
                : 'None'}
            </Typography>
            <Typography variant="body2">Market Value: ${property.market_value || 'N/A'}</Typography>
            <Typography variant="body2">Loan Amount: ${property.loan_amount || 'N/A'}</Typography>
            <Typography variant="body2">
              Loan Term: {property.loan_term ? `${property.loan_term} years` : 'N/A'}
            </Typography>
            <Typography variant="body2">
              Loan Start Date: {property.loan_start_date || 'N/A'}
            </Typography>
            {property.latitude && property.longitude ? (
              <MapComponent
                lat={property.latitude}
                lng={property.longitude}
                address={property.address}
              />
            ) : (
              <p>Error loading the map</p>
            )}
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default PropertyCard;
