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

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

  const deliveryPointId =
    orderData?.order_services_detail?.order_delivery_point_id;

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

  const onChange = (event: any) => {
    const updatedServices = {
      ...orderData?.order_services_detail!,
      order_delivery_point_id: event.value,
    };
    const newData = { ...orderData, order_services_detail: updatedServices };
    setOrderData(newData);
  };

  const isDisabled = true;

  return (
    <Container>
      <Label label="Delivery Point" />
      <StyledSelectDropdown
        placeholder="Select Delivery Point"
        options={deliveryPointOptions || []}
        inputId="deliveryPointDropdown"
        value={deliveryPointOptions?.filter(
          (f: any) => f.value === deliveryPointId
        )}
        openMenuOnFocus
        onChange={onChange}
        // isDisabled={true}
        className={isDisabled ? 'disabled' : ''}
      />
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 6px;
  // flex: 1;
  min-width: 250px;
`;
const StyledSelectDropdown = styled(SelectDropdown)`
  &.disabled {
    pointer-events: none;
    opacity: 0.7;
  }
`;
export default DeliveryPointDropdown;
