index.tsx // ViewWorker

/* eslint-disable @typescript-eslint/no-unused-vars */
import {
  Dialog as MuiDialog,
  DialogContent as MuiDialogContent,
  DialogProps,
  DialogTitle as MuiDialogTitle,
  IconButton,
  styled,
} from '@mui/material';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import CleanDateSvgIcon from '../../../../assets/SvgIcon/CleanDateSvgIcon';
import EditSvgIcon from '../../../../assets/SvgIcon/EditSvgIcon';
import CheckListItem from '../../../../components/CheckListItem';
import WorkerGroupContent from './WorkerGroupContent';

const Dialog = styled(MuiDialog)`
  color: white;
  & .MuiDialog-paper {
    width: 676px;
    height: 686px;
    max-width: unset;
    background: ${({ theme }) => theme.color.secondary.$80};
  }
`;

const Header = styled('div')`
  display: flex;
  align-items: center;
  color: white;
  padding: 8px 8px 8px 16px;
  height: 48px;
`;

const DialogTitle = styled(MuiDialogTitle)`
  ${({ theme }) => ({ ...theme.typography.h3 })}
  flex: 1;
  color: white;
  padding: 0;
`;

const ContentWrapper = styled('div')`
  height: calc(100% - 48px);
  width: 100%;
  display: flex;
`;

const DialogContent = styled(MuiDialogContent)`
  padding: 10px 20px;
`;

const ContainerSelected = styled('div')`
  width: 380px;
  border-radius: 4px;
  padding: 10px 20px;
`;

const CheckList = styled('div')`
  display: flex;
  flex-direction: column;
  width: 280px;
  margin-top: 20px;
`;

type NavigatorWorkerManagement = [
  { id: string; name: 'worker-group'; required: boolean },
  { id: string; name: 'basic-information'; required: boolean },
  { id: string; name: 'emergency-contact'; required: boolean },
  { id: string; name: 'certificate'; required: boolean },
  { id: string; name: 'connected-device'; required: boolean },
];

const navigator: NavigatorWorkerManagement = [
  { id: '1', name: 'worker-group', required: true },
  { id: '2', name: 'basic-information', required: true },
  { id: '3', name: 'emergency-contact', required: false },
  { id: '4', name: 'certificate', required: false },
  { id: '5', name: 'connected-device', required: false },
];

interface ViewWorkerProps extends DialogProps {
  title: string;
  onCloseDialog: () => void;
}

const ViewWorker: React.VFC<ViewWorkerProps> = ({
  open,
  title,
  onCloseDialog,
}) => {
  const [indexNavigator, setIndexNavigator] = useState<number>(0);
  const [checkedValue, setCheckedValue] = useState(
    new Array(navigator.length).fill(true),
  );
  const [checkedState, setCheckedState] = useState(
    new Array(navigator.length).fill(true),
  );

  const { t } = useTranslation();
  console.log(indexNavigator);

  return (
    <Dialog open={open}>
      <Header>
        <DialogTitle>{title}</DialogTitle>
        <IconButton sx={{ color: 'white' }}>
          <EditSvgIcon
            sx={{ width: '32px', height: '32px', cursor: 'pointer' }}
          />
        </IconButton>
        <CleanDateSvgIcon
          sx={{ width: '32px', height: '32px', cursor: 'pointer' }}
          onClick={onCloseDialog}
        />
      </Header>
      <ContentWrapper>
        <DialogContent>
          <CheckList>
            {navigator.map((item, index) => (
              <CheckListItem
                key={item.id}
                name={t(
                  `project-setting:page.worker-management.dialog.create-worker.${item.name}.title`,
                )}
                required={item.required}
                checked={checkedState[index]}
                onClick={() => setIndexNavigator(index)}
                selected={checkedValue[index]}
              />
            ))}
          </CheckList>
        </DialogContent>
        <ContainerSelected>
          {navigator[indexNavigator].name === 'worker-group' && (
            <WorkerGroupContent />
          )}
        </ContainerSelected>
      </ContentWrapper>
    </Dialog>
  );
};

export default ViewWorker;