import React from 'react';
import { Box, Card, CardActionArea, Divider } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import EmailIcon from '@material-ui/icons/EmailOutlined';
import PhoneIcon from '@material-ui/icons/PhoneOutlined';
import OrgIcon from '@material-ui/icons/LanguageOutlined';
import Person from '@material-ui/icons/Person';
import GrowerOrganization from '../GrowerOrganization';
import OptimizedImage from '../OptimizedImage';
import { useStyle } from './Growers.styles.js';

const GrowerTooltip = ({ grower, growerClick }) => {
  const classes = useStyle();
  const matches = grower.imageUrl?.match(/\/\/(.*?)\/(.*)/);
  const useStyles = makeStyles(() => ({
    box: {
      display: 'flex',
      marginTop: '2px',
    },
    label: {
      marginLeft: '12px',
    },
  }));

  const growerToolTipStyles = useStyles();

  return (
    <Box>
      <Box style={{ width: '160px', display: 'block' }}>
        <Card
          style={{
            display: 'flex',
            justifyContent: 'space-around',
            flexDirection: 'column',
            alignItems: 'center',
          }}
          onClick={() => growerClick(grower)}
        >
          <CardActionArea>
            <Box style={{ display: 'flex', margin: '4px' }}>
              <Box
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  margin: '2px',
                }}
              >
                {matches?.length > 1 ? (
                  <OptimizedImage
                    rotation={grower.imageRotation}
                    src={grower.imageUrl}
                    style={{
                      height: '24px',
                      width: '24px',
                    }}
                  />
                ) : (
                  <Person
                    className={classes.person}
                    style={{
                      height: '24px',
                      width: '24px',
                    }}
                  />
                )}
              </Box>
              <Box>
                <Typography className={growerToolTipStyles.label}>
                  {grower.firstName} {grower.lastName}
                </Typography>
              </Box>
            </Box>
            <Divider
              variant="middle"
              sx={{
                marginBottom: '2px',
                marginTop: '4px',
              }}
            />
            <Box
              style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                margin: '0 4px 0 4px',
              }}
            >
              {grower.email && (
                <Box className={growerToolTipStyles.box}>
                  <EmailIcon color="primary" />
                  <Typography className={growerToolTipStyles.label}>
                    {grower.email}
                  </Typography>
                </Box>
              )}
              {(grower.organizaton || grower.organizationId) && (
                <Box className={growerToolTipStyles.box}>
                  <OrgIcon color="primary" />
                  <Box className={growerToolTipStyles.label}>
                    <GrowerOrganization
                      organizationName={grower.organization}
                      assignedOrganizationId={grower.organizationId}
                      compact={true}
                    />
                  </Box>
                </Box>
              )}
              {grower.phone && (
                <Box className={growerToolTipStyles.box}>
                  <PhoneIcon color="primary" />
                  <Typography className={growerToolTipStyles.label}>
                    {grower.phone}
                  </Typography>
                </Box>
              )}
            </Box>
          </CardActionArea>
        </Card>
      </Box>
    </Box>
  );
};

export default GrowerTooltip;