import React from 'react';
import styled from 'styled-components';
import {
  useCurrentAction,
  useOrderDetails,
  useOrderId,
  // useOrderId,
  useStatusDetails,
} from '../../../store';
import { optionsMenu } from '../../../fakedata';
import {
  useCreateReminderPayload,
  useCreateTaskPayload,
} from '../../../order-actions/store';
import { Dropdown, Space } from 'antd';
import ArrowDownIcon from '../../../../../assets/icons/ArrowDownIcon';

function Options() {
  const [, setCurrentAction] = useCurrentAction();
  const [orderId] = useOrderId();
  const [, setReminderPayload] = useCreateReminderPayload();
  const [, setTaskPayload] = useCreateTaskPayload();
  const [orderStatus] = useStatusDetails();
  const [orderDetails] = useOrderDetails();

  const handleSelectChange = (selectedOption: any) => {
    setCurrentAction(selectedOption);

    if (selectedOption === 'create-reminder') {
      setReminderPayload((prevState: any) => ({
        ...prevState,
        order_id: orderId,
      }));
    } else if (selectedOption === 'create-task') {
      setTaskPayload((prevState: any) => ({
        ...prevState,
        order_id: orderId,
      }));
    }
  };

  const isReleased = orderStatus[0]?.released;
  const routedValue = orderStatus[0]?.routed;
  const isRouted = orderStatus[0]?.routed && orderDetails?.order_routes?.id;
  const isOrderOnHold = orderDetails?.status === 'OO';
  const isOrderCancelled = orderDetails?.status === 'CO';

  const filteredOptions = optionsMenu?.filter(option => {
    let shouldExclude = false;

    if (isOrderOnHold && option.value === 'hold-order') {
      shouldExclude = true;
    }
    if (isOrderCancelled && option.value === 'cancel-order') {
      shouldExclude = true;
    }
    if (!isOrderCancelled || isOrderOnHold) {
      if (option.value === 'uncancel-order') {
        shouldExclude = true;
      }
    }
    if (!isReleased && option.value === 'unrelease-order') {
      shouldExclude = true;
    }
    if (!isOrderOnHold && option.value === 'unhold-order') {
      shouldExclude = true;
    }

    if (isOrderOnHold && option.value === 'confirm-order') {
      shouldExclude = true;
    }

    if (!isRouted && option.value === 'log-service-refusal') {
      shouldExclude = true;
    }

    if (routedValue && option.value === 'remove-from-route') {
      shouldExclude = true;
    }

    return !shouldExclude;
  });

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

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

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 Options;
