editable

import { styled, Typography } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import CheckboxItem from '../../../../components/Checkbox/CheckboxItem';
import { WorkerGroup } from '../../../../types';

const Container = styled('div')`
  height: calc(100% - 80px);
  width: 100%;
`;

const ContainerContent = styled('div')`
  height: 100%;
  width: 100%;
  overflow-y: auto;
  border-radius: 4px;
`;

const TextGroup = styled(Typography)`
  color: white;
  margin-left: 12px;
`;

const WorkerGroupItemContainer = styled('div')`
  display: flex;
  align-items: center;
  height: 64px;
  padding: 12px 10px;
  background-color: ${({ theme }) => theme.color.secondary.$100};
`;

const ContainerCheckbox = styled('div')`
  width: 40px;
  height: 40px;
`;

const ContentTitle = styled(Typography)`
  color: white;
`;
const SpanRequire = styled('span')`
  color: ${({ theme }) => theme.color.highlight};
`;

interface WorkerGroupProps {
  groupWorker: Array<WorkerGroup>;
  workerGroupSelected: Array<WorkerGroup>;
  handleIsPass: (isPass: boolean) => void;
  handleWorkerGroupWillAssign: (
    workerGroupWillAssign: Array<WorkerGroup>,
  ) => void;
}
const WorkerGroupContent: React.VFC<WorkerGroupProps> = ({
  groupWorker,
  workerGroupSelected,
  handleIsPass,
  handleWorkerGroupWillAssign,
}) => {
  const [checkedValue, setCheckedValue] = useState<Array<WorkerGroup>>([]);
  const [checkedState, setCheckedState] = useState<Array<boolean>>(
    new Array(groupWorker.length).fill(false),
  );

  const { t } = useTranslation('project-setting');

  // useEffect(() => {
  //   if (workerGroupSelected) {
  //     setCheckedValue([...checkedValue, workerGroupSelected]);
  //   }
  // }, [workerGroupSelected]);

  useEffect(() => {
    setCheckedState(
      groupWorker.map((group, index) =>
        group.id === workerGroupSelected[index].id ? true : false,
      ),
    );
  }, [workerGroupSelected]);

  useEffect(() => {
    if (checkedValue.length > 0) {
      handleIsPass(true);
    } else {
      handleIsPass(false);
    }
    handleWorkerGroupWillAssign(checkedValue);
  }, [checkedValue]);

  const handleOnchange = (
    event: React.ChangeEvent<HTMLInputElement>,
    position,
  ) => {
    const updateChecked = checkedState.map((item, index) =>
      index === position ? !item : item,
    );
    setCheckedState(updateChecked);

    let updatedList = [...checkedValue];
    const newValue = event.target.value;
    const groupSelected = groupWorker.filter((group) => group.id === newValue);
    if (event.target.checked) {
      updatedList = [...checkedValue, groupSelected[0]];
    } else {
      updatedList.splice(checkedValue.indexOf(groupSelected[0], 1));
    }
    setCheckedValue(updatedList);
  };

  console.log(checkedValue);

  const item = groupWorker.map((group, index) => (
    <WorkerGroupItemContainer key={`Worker-group ${index}`}>
      <ContainerCheckbox>
        <CheckboxItem
          value={group.id}
          onChange={(e) => handleOnchange(e, index)}
          checked={checkedState[index]}
          disabled={group.id === workerGroupSelected[index]?.id ? true : false}
        />
      </ContainerCheckbox>
      <TextGroup variant="body2">{group.name}</TextGroup>
    </WorkerGroupItemContainer>
  ));

  return (
    <Container>
      <ContentTitle>
        {t('page.worker-management.dialog.create-worker.worker-group.title')}
        <SpanRequire>*</SpanRequire>
      </ContentTitle>
      <ContainerContent>{item}</ContainerContent>
    </Container>
  );
};

export default WorkerGroupContent;