WorkerItem.tsx // worker-management

import { Avatar, styled } from '@mui/material';
import React, { CSSProperties, useState } from 'react';
import ViewWorker from './ViewWorker';

interface ContainerProps {
  orgColor?: CSSProperties['color'];
}

//prettier-ignore
const Container = styled('div', { shouldForwardProp: prop => prop !== 'orgColor' })<ContainerProps>`
  display: flex;
  align-items: center;
  color: white;
  padding: 12px 10px;
  cursor: pointer;
  &:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  & .info {
    flex: 1;
    div {
      ${({ theme }) => ({ ...theme.typography.body2 })}
      display: flex;
      align-items: center;
      max-width: 305px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &:nth-of-type(2) {
        ${({ theme }) => ({ ...theme.externalTypography.body3 })}
        color: ${({ theme }) => theme.color.secondary.$60};
        &:before {
          display: inline-block;
          content: '';
          width: 6px;
          height: 14px;
          border-radius: 3px;
          background: ${({ orgColor }) =>
            orgColor ? orgColor : 'transparent'};
          margin-right: 6px;
        }
      }
    }
  }
`;

interface WorkerItemProps {
  name: string;
  orgName: string;
  orgColor?: CSSProperties['color'];
  imageURL: string | null;
}

const WorkerItem: React.VFC<WorkerItemProps> = ({
  name,
  orgName,
  orgColor,
  imageURL,
}) => {
  const [openDialog, setOpenDialog] = useState(false);
  return (
    <>
      <Container orgColor={orgColor} onClick={() => setOpenDialog(true)}>
        <Avatar
          variant="rounded"
          sx={{ width: '40px', height: '40px', mr: '10px' }}
          src={imageURL ?? ''}
        />
        <div className="info">
          <div title={name}>{name}</div>
          <div title={orgName}>{orgName}</div>
        </div>
      </Container>
      <ViewWorker
        open={openDialog}
        title="Worker Information"
        onCloseDialog={() => setOpenDialog(false)}
      />
    </>
  );
};

export default WorkerItem;