import { Alert, Checkbox } from '@bjsdistribution/dms-component-library';
import React, { useEffect } from 'react';
import styled from 'styled-components';
import {
  useFinalPayload,
  useGroupedPayload,
  useSelectedConfirmLoc,
  useSelectedOrders,
} from '../../store';
import { displayValueOrNA } from '../../order-daily-overview/shared/utlis';

const CreateReturnModal = () => {
  const [selectedlocation, setSelectedLocations] = useSelectedConfirmLoc();
  const [selectedReturnOrder] = useSelectedOrders();
  const [groupedPayload] = useGroupedPayload();
  const [, setNew] = useFinalPayload();

  const handleSelectLocations = (id: number) => {
    setSelectedLocations((prevSelectedLocations: number[]) => {
      const isSelected = prevSelectedLocations?.includes(id);

      if (isSelected) {
        return prevSelectedLocations?.filter(selectedId => selectedId !== id);
      } else {
        return [...prevSelectedLocations, id];
      }
    });
  };

  const uniqueLocations = selectedReturnOrder?.reduce((acc, current) => {
    const x = acc.find(
      (item: any) => item.return_location === current.return_location
    );
    if (!x) {
      acc.push(current);
    }
    return acc;
  }, []);

  useEffect(() => {
    if (groupedPayload?.length > 0 && selectedlocation?.length > 0) {
      const matchedItems = groupedPayload?.filter((item: any) =>
        selectedlocation.includes(item.id)
      );

      if (matchedItems.length > 0) {
        const finalPayload = matchedItems?.map(({ id, ...rest }: any) => rest);
        setNew(finalPayload);
      }
    }
  }, [selectedlocation]);

  return (
    <>
      <Wrapper>
        <Alert
          onClose={() => {}}
          description=""
          type="info"
          title="Do you wish to proceed?"
          showOkButton={false}
        />
        <Container>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            {uniqueLocations?.map((returnLoc: any) => {
              return (
                <li
                  key={returnLoc.id}
                  style={{
                    marginBottom: '8px',
                    display: 'flex',
                    alignItems: 'center',
                  }}
                >
                  <Checkbox
                    checked={selectedlocation?.includes(returnLoc.id)}
                    onChange={() => handleSelectLocations(returnLoc.id)}
                  />
                  <StyledText style={{ marginLeft: '8px' }}>
                    {displayValueOrNA(returnLoc?.return_location_name)}
                  </StyledText>
                </li>
              );
            })}
          </ul>
        </Container>
      </Wrapper>
    </>
  );
};

const StyledText = styled.div`
  color: #8d8f90;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
`;

const Container = styled.div``;

export const Wrapper = styled.div`
  display: flex;
  padding: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  align-self: stretch;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
`;

export default CreateReturnModal;
