import React, { memo } from 'react';
import {
  Card,
  CardContent,
  Typography,
  Box,
  makeStyles
} from '@material-ui/core';
import LocationOnRoundedIcon from '@material-ui/icons/LocationOnRounded';
interface CompanyData {
  company: string;
  city: string;
  registered_address: string;
  count: number;
}

interface TopMovementTypeItemsProps {
  movementType: string;
  companies: CompanyData[];
  dotSize?: number;
  gap?: number;
  heading: string;
}

const COLORS: Record<string, string> = {
  containers: '#1FA0ED',
  loose_cargo: '#223A59',
  full_truck_load: '#FFCE56',
};

const useStyles = makeStyles((theme) => ({
  card: {
    minWidth: 200,
    marginBottom: theme.spacing(2),
    borderRadius: '8px',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
    height: '280px',
    overflowY: ({ length }: { length: number }) => length>1 ? 'scroll' : 'hidden',
   '&::-webkit-scrollbar': {
      width: '6px',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: theme.palette.primary.main, 
      borderRadius: '6px',
    },
    '&::-webkit-scrollbar-track': {
      backgroundColor: theme.palette.grey[200], 
    },
  },
  header: {
    fontSize: '1rem',
    fontWeight: 600,
    marginBottom: theme.spacing(2),
  },
  companyRow: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: theme.spacing(1),
  },
  dot: {
    flexShrink: 0,
    borderRadius: '50%',
    transition: 'all 0.2s ease-in-out',
    marginTop: theme.spacing(0.5),
  },
  address: {
    display: 'flex',
    alignItems: 'center',
    gap: theme.spacing(0.5),
    color: theme.palette.text.secondary,
  },
  count: {
    fontWeight: 500,
    color: theme.palette.text.primary,
  },
}));

const TopMovementTypeItems: React.FC<TopMovementTypeItemsProps> = ({
  movementType,
  companies,
  dotSize = 12,
  heading,
}) => {
  const classes = useStyles({ length: companies?.length || 0 });
  const getMovementColor = (type: string): string => {
    switch (type.toLowerCase()) {
      case 'container':
        return COLORS.containers;
      case 'loose cargo':
        return COLORS.loose_cargo;
      case 'full truck load':
        return COLORS.full_truck_load;
      default:
        return COLORS.containers;
    }
  };

  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography
          variant="h6"
          className={classes.header}
        >
          {heading} {movementType}-({companies?.length})
        </Typography>
        <Box display="flex" flexDirection="column" style={{ gap: "8px" }}>
          {companies?.map((company) => (
            <div key={company.company} className={classes.companyRow}>
              <span
                className={classes.dot}
                style={{
                  width: `${dotSize}px`,
                  height: `${dotSize}px`,
                  backgroundColor: getMovementColor(movementType),
                }}
              />
              <Box flex={1}>
                <Typography variant="body2">
                  {company.company}
                </Typography>
                <Typography
                  variant="body2"
                  className={classes.count}
                >
                  Count: {company.count}
                </Typography>
                <Typography
                  variant="caption"
                  className={classes.address}
                >
                  <LocationOnRoundedIcon fontSize="small" />
                  {company.registered_address}
                </Typography>
              </Box>
            </div>
          ))}
        </Box>
      </CardContent>
    </Card>
  );
};

export default memo(TopMovementTypeItems);