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 ServiceTypeDropdown() {
  const [orderStaticData] = useOrderStaticData();
  const [orderData, setOrderData] = useOrderDetails();

  const orderTypeId = orderData?.order_type_id;

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

  const onChange = (event: any) => {
    const newData = { ...orderData, order_type_id: event.value };
    setOrderData(newData);
  };
  const isDisabled = true;

  return (
    <Container>
      <Label label="Service Type" htmlFor="serviceTypeDropdown" />
      <StyledSelectDropdown
        placeholder="Select Service Type"
        options={serviceTypeOptions || []}
        value={serviceTypeOptions?.filter((f: any) => f.value === orderTypeId)}
        inputId="serviceTypeDropdown"
        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 {
    cursor: not-allowed !important;
    opacity: 0.7;
  }
`;

export default ServiceTypeDropdown;
