import React from 'react';
import styled from 'styled-components';
import Checkbox from '../../../../../common/checkbox';
import { getIcon } from './helper';
import { useOrderDetails, useOrderStaticData } from '../../../store';
import { OrderServiceType } from '../../../types';
interface IProps {
  refusedServices: string[];
  setRefusedServices: React.Dispatch<React.SetStateAction<string[]>>;
}

function OrderServices(props: IProps) {
  const [orderStaticData] = useOrderStaticData();
  const [orderDetails] = useOrderDetails();
  const orderServices = orderDetails?.order_services;
  const orderServicesOptions = orderStaticData?.order_service_list;

  const onClick = (service: string) => {
    if (props?.refusedServices?.includes(service)) {
      const filteredServices = props?.refusedServices?.filter(
        (item: string) => item !== service
      );
      props?.setRefusedServices(filteredServices);
    } else {
      props?.setRefusedServices((prev: string[]) => [...prev, service]);
    }
  };

  return (
    <Container>
      {orderServicesOptions.map((service: any) => {
        const selected = !!orderServices?.find(
          (s: OrderServiceType) =>
            s?.order_service_list_id === service?.id && s.is_deleted === false
        );
        const isRefused = props?.refusedServices?.includes(service?.type);
        return (
          <Checkbox
            checked={isRefused}
            label={service?.type}
            imageSrc={getIcon(service?.id)}
            enabled={selected}
            onClickCheckbox={onClick}
          />
        );
      })}
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
`;

export default OrderServices;
