import React from 'react';
import { bjsMenu } from '../../../fakedata';
import { useCurrentAction, useStatusDetails } from '../../../store';
import ArrowDownIcon from '../../../../../assets/icons/ArrowDownIcon';
import { Dropdown, Space } from 'antd';
import styled from 'styled-components';

function BjsMenuDropDown() {
  const [, setCurrentAction] = useCurrentAction();
  const handleSelectChange = (selectedOption: any) => {
    setCurrentAction(selectedOption);
  };

  const [orderStatus] = useStatusDetails();

  const isReleased = orderStatus[0]?.released;

  const filteredOptions = bjsMenu.filter(option => {
    if (isReleased) {
      return option.value !== 'release-order';
    } else {
      return option;
    }
  });

  const menuItems = {
    items: filteredOptions?.map(option => ({
      key: option.value,
      label: (
        <div onClick={() => handleSelectChange(option.value)}>
          {option.label}
        </div>
      ),
    })),
  };

  return (
    <Dropdown menu={menuItems} trigger={['hover']}>
      <a onClick={e => e.preventDefault()} style={{ cursor: 'pointer' }}>
        <StyledSpace>
          BJS MENU
          <ArrowDownIcon fill={'#f0f2f2'} />
        </StyledSpace>
      </a>
    </Dropdown>
  );
}

const StyledSpace = styled(Space)`
  .ant-space-item {
    color: #6a7378;
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
  }
`;

export default BjsMenuDropDown;
