import React from 'react';
import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
import { useOrderDetails, useOrderStaticData } from '../../../store';
import styled from 'styled-components';
import { capitalize } from '../../../utils';

function ServiceLevel() {
  const [orderStaticData] = useOrderStaticData();
  const [orderData, setOrderData] = useOrderDetails();

  const serviceLevelId =
    orderData?.order_services_detail?.order_service_level_id;

  const serviceLevelOptions = orderStaticData?.order_service_levels?.map(
    (option: any) => ({
      label: capitalize(option.type.replaceAll('_', ' ')),
      value: option.id.toString(),
    })
  );

  const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    const updatedServices = {
      ...orderData?.order_services_detail!,
      order_service_level_id: +event.target.value,
    };
    const newData = { ...orderData, order_services_detail: updatedServices };
    setOrderData(newData);
  };

  const isDisabled = true; // Example value

  return (
    <Container disabled={isDisabled}>
      <RadioButtonGroup
        selectedValue={serviceLevelId?.toString() || ''}
        heading="Service Level"
        options={serviceLevelOptions || []}
        onChange={radioGroupHandler}
        required={true}
        isDisabled={isDisabled}
      />
    </Container>
  );
}

const Container = styled.div<{ disabled: boolean }>`
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;

  ${({ disabled }) =>
    disabled &&
    `
    pointer-events: none;

    > * {
      pointer-events: none;
    }
  `}

  > fieldset {
    > div {
      > div {
        > label {
          text-transform: capitalize;
        }
      }
    }
  }
`;

export default ServiceLevel;
