import { Label } from '@bjsdistribution/dms-component-library';
import React from 'react';
import styled from 'styled-components';
import { vehicleTypeOptions } from '../../helper';
import { useOrderDetails } from '../../../store';
import { StyledSelectDropdown } from './Depot';

function VehicleTypeDropdown() {
  const [orderDetails, setOrderDetails] = useOrderDetails();
  const onChange = (e: any) => {
    setOrderDetails(prev => {
      return {
        ...prev,
        vehicle_type: e.label,
      };
    });
  };

  return (
    <FormContainer>
      <Label label="Vehicle Type" htmlFor="vehicleType" />
      <StyledSelectDropdown
        placeholder="Select vehicle type"
        options={vehicleTypeOptions}
        inputId="vehicleType"
        openMenuOnFocus
        value={vehicleTypeOptions?.filter(
          (x: any) => x.label === orderDetails?.vehicle_type
        )}
        onChange={onChange}
      />
    </FormContainer>
  );
}

const FormContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
`;

export default VehicleTypeDropdown;
