import React from 'react';
import { Box, Link, Typography, Avatar, Grid, SxProps } from '@mui/material';
import { 
  Card,
  CardContent,
  Divider,
  useTheme,
} from '@mui/material';
import { useMediaQuery } from '@mui/material';
import { useUser } from "../hooks/useUser";
import { Candidate } from '../types/types';
import { CopyBubble } from "./CopyBubble";

interface CandidateInfoProps {
  candidate: Candidate;
  sx?: SxProps;
  action?: string;
};

const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps) => {
  const { candidate } = props;
    const {
        sx,
      action = '',
    } = props;
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  if (!candidate) {
    return <Box>No user loaded.</Box>;
  }
  return (
    <Card 
      elevation={1}
      sx={{ 
        display: "flex",
        borderColor: 'transparent',
        borderWidth: 2,
        borderStyle: 'solid',
        transition: 'all 0.3s ease',
        ...sx
      }}
    >
      <CardContent sx={{ flexGrow: 1, p: 3, height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
                    
        <Grid container spacing={2}>
        <Grid 
          size={{ xs: 12, sm: 2 }} 
          sx={{ 
            display: 'flex', 
            justifyContent: 'center', 
            alignItems: 'center', 
            minWidth: "80px", 
            maxWidth: "80px" 
            }}>
          <Avatar
              src={candidate.hasProfile ? `/api/u/${candidate.username}/profile?timestamp=${Date.now()}` : ''}
              alt={`${candidate.fullName}'s profile`}
            sx={{
              alignSelf: "flex-start",
              width: 80,
              height: 80,
              border: '2px solid #e0e0e0',
            }}
          />
        </Grid>

        <Grid size={{ xs: 12, sm: 10 }}>
          <Box 
            sx={{ 
              display: 'flex', 
              justifyContent: 'space-between', 
              alignItems: 'flex-start', 
              mb: 1 }}>
            <Box>
              <Box sx={{ 
                display: "flex", 
                flexDirection: isMobile ? "column" : "row", 
                alignItems: "left", 
                gap: 1, "& > .MuiTypography-root": { m: 0 } 
              }}>
                {
                  action !== '' && 
                    <Typography variant="body1">{action}</Typography>
                }
                <Typography variant="h5" component="h1" 
                  sx={{ 
                    fontWeight: 'bold', 
                    whiteSpace: 'nowrap' 
                  }}>
                    {candidate.fullName}
                </Typography>
              </Box>
              <Box sx={{ fontSize: "0.75rem", alignItems: "center" }} >
                <Link href={`/u/${candidate.username}`}>{`/u/${candidate.username}`}</Link>
                <CopyBubble
                  onClick={(event: any) => { event.stopPropagation() }}
                  tooltip="Copy link" content={`${window.location.origin}/u/{candidate.username}`} />
              </Box>
              </Box>
          </Box>

          <Typography variant="body1" color="text.secondary">
            {candidate.description}
          </Typography>

                    <Divider sx={{ my: 2 }} />
                    
                    { candidate.location && <Typography variant="body2" sx={{ mb: 1 }}>
              <strong>Location:</strong> {candidate.location.city}, {candidate.location.state || candidate.location.country}
                    </Typography> }
                    { candidate.email && <Typography variant="body2" sx={{ mb: 1 }}>
              <strong>Email:</strong> {candidate.email}
                    </Typography> }
                    { candidate.phone && <Typography variant="body2">
                      <strong>Phone:</strong> {candidate.phone}
                    </Typography> }
            </Grid>

        </Grid>
      </CardContent>
    </Card>
  );
};

export { CandidateInfo };