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

function DepotDropdown() {
  const [orderDetails, setOrderDetails] = useOrderDetails();
  const [depotOptions] = useDepotOptions();
  const onChange = (e: any) => {
    setOrderDetails(prev => {
      return {
        ...prev,
        depot_id: e.value,
      };
    });
  };
  return (
    <FormContainer>
      <Label label="Depot" htmlFor="depotDropdown" />
      <StyledSelectDropdown
        placeholder="Select Depot"
        inputId="depotDropdown"
        openMenuOnFocus={false}
        value={depotOptions.filter(
          (x: any) => x.value === orderDetails.depot_id
        )}
        options={depotOptions || []}
        onChange={onChange}
        styles={{
          ...dropdownStyles,

          control: (styles: any) => ({
            ...styles,
            borderRadius: '25px',
            cursor: 'pointer',
          }),
        }}
      />
    </FormContainer>
  );
}

const FormContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
`;
export const StyledSelectDropdown = styled(SelectDropdown)`
  min-width: 160px;
`;
export default DepotDropdown;
