import styled from 'styled-components';
import React from 'react';
import {
  AntSelect,
  StandardOptionsType,
} from '@bjsdistribution/dms-component-library';

interface ActionsDropdownProps {
  label: string;
  placeholder: string;
  options: StandardOptionsType[];
  onSelect: (value: string) => void;
  onSearch?: () => void;
  className?: string;
  value?: string;
  disabled?: boolean;
  defaultValue?: any;
  onChange?: any;
  required?: boolean;
}

function OrderActionsDropdown(props: ActionsDropdownProps) {
  return (
    <Container className={props.className}>
      <Label>
        {props.label}
        {props.required && <RequiredAsterisk>*</RequiredAsterisk>}
      </Label>
      <AntSelect
        options={props.options}
        placeholder={props.placeholder}
        onChange={props.onSelect}
        disabled={props.disabled}
        style={{ width: '100%' }}
        onSearch={props.onSearch}
        showSearch={true}
        popupClassName={'dropDownStyle'}
        selectWrapperClass={'rounded'}
        defaultValue={props.value}
      />
    </Container>
  );
}

const RequiredAsterisk = styled.span`
  color: red;
  margin-left: 2px;
`;

const Label = styled.label`
  color: #6a7378;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
`;

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

export default OrderActionsDropdown;
