ShiftSync/components/common/TransferBox/TransferBox.jsx

import React, { useState } from 'react';
import styled from '@emotion/styled';
import CheckIcon from '@mui/icons-material/Check';
import DoNotDisturbIcon from '@mui/icons-material/DoNotDisturb';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';

const CenterButton = styled('div')`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  cursor: ${({ buttonEnabled }) => (buttonEnabled ? 'pointer' : 'not-allowed')};
  transition: background-color 0.3s ease, color 0.3s ease;
  opacity: ${({ buttonEnabled }) => (buttonEnabled ? 1 : 0.5)};

  ${({ color, buttonEnabled }) => buttonEnabled && color && `
    &:hover {
      background-color: ${color};
      color: white;
    }
  `}
`;

export const TransferBox = ({ fields, leftGroup, rightGroup }) => {
  const {
    id,
    exclusionList,
    oldListLabel,
    newListLabel
  } = fields;

  const [itemSelected, setItemSelected] = useState({});
  const [containsSelection, setContainsSelection] = useState([]);

  return (
    <div style={{ display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'space-around' }}>
      <div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center', padding: '5px' }}>
        <div style={{ paddingBottom: '10px' }}>
          <h2>{oldListLabel}</h2>
        </div>
        <div style={{ display: 'flex', width: '200px', height: '250px', border: '1px solid black', borderRadius: '5px', backgroundColor: '#E8E8E8' }}>
          <div 
            style={{
              display: 'flex',
              flexDirection: 'column',
              padding: '5px',
            }}
          >
            {leftGroup?.map((j, index) => {
              return (
                <div
                  key={index}
                  style={{
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    width: '80%',
                    padding: '2px',
                  }}
                  title={j?.value}
                >
                  <span>{j?.value}</span>
                </div>
              )
            })}
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', width: '25%', alignItems: 'center', justifyContent: 'center' }}>
        <CenterButton
          onClick={() => { console.log('clicked Right') }}
          color='#A8A8A8'
          buttonEnabled={itemSelected?.id}
        >
          <KeyboardArrowRightIcon />
        </CenterButton>
        <CenterButton
          onClick={() => { console.log('clicked Clear') }}
          color='#FF6666'
          buttonEnabled={containsSelection?.length > 0}
        >
          <DoNotDisturbIcon />
        </CenterButton>
        <CenterButton
          onClick={() => { console.log('clicked Save') }}
          color='#00B33C'
          buttonEnabled={containsSelection?.length > 0}
        >
          <CheckIcon />
        </CenterButton>
        <CenterButton
          onClick={() => { console.log('clicked Left') }}
          color='#A8A8A8'
          buttonEnabled={itemSelected?.id}
        >
          <KeyboardArrowLeftIcon />
        </CenterButton>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center', padding: '5px' }}>
        <div style={{ paddingBottom: '10px' }}>
          <h2>{newListLabel}</h2>
        </div>
        <div style={{ display: 'flex', width: '200px', height: '250px', border: '1px solid black', borderRadius: '5px', backgroundColor: '#E8E8E8' }}>
          <div 
            style={{
              display: 'flex',
              flexDirection: 'column',
              padding: '5px',
            }}
          >
            {rightGroup?.map((j, index) => {
              return (
                <div
                  key={index}
                  style={{
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    width: '80%',
                    padding: '2px',
                  }}
                  title={j?.value}
                >
                  <span>{j?.value}</span>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  );
}