import React, { useEffect, useState } from 'react';
import { useOrderStaticData, useSelectionAction } from '../../../../store';
import { capitalize } from '../../../../utils';
import { Select } from 'antd';
import { Label } from '@bjsdistribution/dms-component-library';
import styled from 'styled-components';

function ActionDropdown() {
  const [orderStaticData] = useOrderStaticData();
  const [actionTypeOptions, setActionTypeOptions] = useState<any>([]);
  const [selectedAction, setSelectedAction] = useSelectionAction();

  useEffect(() => {
    if (orderStaticData) {
      const options = orderStaticData?.order_contact_action_type?.map(
        (option: any) => ({
          label: capitalize(option?.type?.replaceAll('_', ' ')), // Display text
          value: option?.type,
        })
      );
      setActionTypeOptions(options);

      if (options?.length > 0 && !selectedAction) {
        setSelectedAction(options[0]?.value);
      }
    }
  }, [orderStaticData]);
  const onSelect = (value: any) => {
    setSelectedAction(value);
  };

  return (
    <Container>
      <Label label="Action" />
      <Select
        style={{ minWidth: '260px' }}
        placeholder="Select Action"
        options={actionTypeOptions}
        value={selectedAction || undefined}
        onChange={onSelect}
        className="action-dropdown"
      />
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  .ant-select-selector {
    border-radius: 25px;
  }
`;

export default ActionDropdown;
